Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
css 垂直居中的几种方法_csstransform属性,希望能够帮助你!!!。

一、CSS 垂直居中

1、父元素display:table-cell;vertical-align:center，里面的子元素就会实现垂直居中，不需要知道子元素的宽高

/* HTML */ <div class='father'> <div class='son'></div> </div> <style> .father { display: table-cell; vertical-align: middle; width: 300px; height: 300px; border: 3px solid red; } .son { width: 50px; height: 50px; background-color: aqua; } </style> 复制代码

• 效果展示

2、absolute+margin:auto，定位为 absolute 的元素垂直居中，不需要知道该元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; background-color: aqua; width: 50px; height: 50px; top: 0; bottom: 0; margin: auto; } </style> 复制代码

• 效果展示

3、absolute+负margin，定位为 absolute 的元素垂直居中，需要知道该元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; width: 100px; height: 100px; background-color: aqua; top: 50%; /* 负margin须是高度的一半 */ margin-top: -50px; } </style> 复制代码

• 效果展示

4、absolute+calc(css3计算属性)，定位为 absolute 的元素垂直居中，需要知道该元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; width: 100px; height: 100px; background-color: aqua; /* 注意"-"两边要隔开 减去的须是高度的一半*/ top: calc(50% - 50px); } </style> 复制代码

• 效果展示

5、absolute+transform，定位为 absolute 的元素垂直居中，不需要知道元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { position: relative; width: 300px; height: 300px; border: 3px solid red; } .son { position: absolute; width: 100px; height: 100px; background-color: aqua; top: 50%; transform: translateY(-50%); } </style> 复制代码

• 效果展示

6、line-height，父元素：line-height=height。子元素：display:inline-block。子元素垂直居中，不需要知道子元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; line-height: 300px; } .son { background-color: aqua; width: 100px; height: 100px; display: inline-block; vertical-align: middle; } </style> 复制代码

• 效果展示

7、flex，目前主流的布局方案，父元素为 flex 容器且添加 align-items: center，控制子元素的布局。不需要知道子元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; display: flex; align-items: center; } .son { background-color: aqua; width: 100px; height: 100px; } </style> 复制代码

• 效果展示

8、grid ，目前最强大的布局方案，使用还尚未流行。父元素为 grid，子元素添加 align-self: center。不需要知道子元素的宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; display: grid; } .son { background-color: aqua; width: 100px; height: 100px; align-self: center; } </style> 复制代码

• 效果展示

9、伪元素after或before，这是我搜出来整理的。CSS 真的太神（s）奇（d）了，毫无道理。子元素垂直居中不需要知道宽高

<!-- HTMl --> <div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; display: block; } .father::after { content: ""; display: inline-block; vertical-align: middle; height: 100%; } .son { background-color: aqua; width: 50px; height: 50px; display: inline-block; vertical-align: middle; } </style> 复制代码

• 效果展示

10、隐藏节点(盒子)实现 该原理就是使用盒子占位置，但不显示出该盒子。另外的盒子垂直居中，子盒子的宽高需由实际计算时确定

<!-- HTML --> <div class="father"> <div class="hide"></div> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; } .son { background-color: aqua; width: 50%; height: 50%; } .hide { width: 50px; height: 25%; } </style> 复制代码

• 效果展示

11、writing-mode，这是搜索整理而来，参考资料见最后。子元素盒子 display: inline-block。子元素垂直居中，不需要知道该盒子的宽高

<!-- HTML --> <div class="father"> <div class="son"></div> </div> <style> .father { width: 300px; height: 300px; border: 3px solid red; writing-mode: vertical-lr; text-align: center; } .son { background-color: aqua; width: 100px; height: 100px; writing-mode: horizontal-tb; display: inline-block; } </style> 复制代码

• 效果展示

三、参考资料

作者：soloplayer
链接：https://juejin.cn/post/
来源：掘金

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。