一、CSS 垂直居中
1、父元素display:table-cell;vertical-align:center,里面的子元素就会实现垂直居中,不需要知道子元素的宽高
/* HTML */复制代码
- 效果展示
![c09baa7cfca1ba1fe3b913d7a3ce4e0f.png](https://i-blog.csdnimg.cn/blog_migrate/6ade2a9338c6aa7cc0d8493385d7799d.jpeg)
2、absolute+margin:auto,定位为 absolute 的元素垂直居中,不需要知道该元素的宽高
复制代码
- 效果展示
![d8fec23f2a435162baa077d3ed08ce31.png](https://i-blog.csdnimg.cn/blog_migrate/f563240711cb5974c4a57612aadb9daf.jpeg)
3、absolute+负margin,定位为 absolute 的元素垂直居中,需要知道该元素的宽高
复制代码
- 效果展示
![b81cdb14e3ae84da0633edd8c75c5e72.png](https://i-blog.csdnimg.cn/blog_migrate/be719df1c37b2f1f154681b6e46a9211.jpeg)
4、absolute+calc(css3计算属性),定位为 absolute 的元素垂直居中,需要知道该元素的宽高
复制代码
- 效果展示
![54f0d83d3dd3fc1f3c0bdc688afea2e1.png](https://i-blog.csdnimg.cn/blog_migrate/6bfdbcddf54d71031723432c7b8483f7.jpeg)
5、absolute+transform,定位为 absolute 的元素垂直居中,不需要知道元素的宽高
复制代码
- 效果展示
![921ed88fd3eec5967c60d6d51157ffcd.png](https://i-blog.csdnimg.cn/blog_migrate/7e251e3b1b221ee673e3cc6e337e4946.jpeg)
6、line-height,父元素:line-height=height。子元素:display:inline-block。子元素垂直居中,不需要知道子元素的宽高
复制代码
- 效果展示
![4fe065ac82a9f828f710b0e10837d565.png](https://i-blog.csdnimg.cn/blog_migrate/da2a0d3588227363ec68698e254ab167.jpeg)
7、flex,目前主流的布局方案,父元素为 flex 容器且添加 align-items: center,控制子元素的布局。不需要知道子元素的宽高
复制代码
- 效果展示
8、grid ,目前最强大的布局方案,使用还尚未流行。父元素为 grid,子元素添加 align-self: center。不需要知道子元素的宽高
复制代码
- 效果展示
![98f62af824b33fe9652d02a3753744e5.png](https://i-blog.csdnimg.cn/blog_migrate/a57120e920c29ff21a0d14f59c74387a.jpeg)
9、伪元素after或before,这是我搜出来整理的。CSS 真的太神(s)奇(d)了,毫无道理。子元素垂直居中不需要知道宽高
复制代码
- 效果展示
![2e4ec75b4123b3477793a0d45649d461.png](https://i-blog.csdnimg.cn/blog_migrate/d24669a769066392bab77adb1908596a.jpeg)
10、隐藏节点(盒子)实现 该原理就是使用盒子占位置,但不显示出该盒子。另外的盒子垂直居中,子盒子的宽高需由实际计算时确定
复制代码
- 效果展示
![cc6e51d027dad2cd50fb861d423d8335.png](https://i-blog.csdnimg.cn/blog_migrate/e3f05c3ca904bf0bff4e8b897e8ecacf.jpeg)
11、writing-mode,这是搜索整理而来,参考资料见最后。子元素盒子 display: inline-block。子元素垂直居中,不需要知道该盒子的宽高
复制代码
- 效果展示
![a2cf46013b013a8f93decfb8768d1029.png](https://i-blog.csdnimg.cn/blog_migrate/34b6f8d3e30b57c9eb80eb8562bb03b2.jpeg)
三、参考资料
作者:soloplayer
链接:https://juejin.cn/post/6904138129612439560
来源:掘金