CSS中有哪些方法可以实现垂直居中（一）？

这里是修真院前端小课堂，每篇分享文从【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】八个方面深度解析前端知识/技能。

本篇分享的是：【CSS中有哪些方法可以实现垂直居中？ 】

（1）背景介绍：

在前端开发过程中，对页面进行布局时，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端工程师的基本功。

（2）知识剖析：

几种常用到的垂直居中方法：

1、头部和顶部使用相同大小的padding值可以实现居中。

2、单行文本可以用line-height实现垂直居中，设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

3、通过display:flex，align-items: center;或 align-self: center;实现垂直居中。

4、使用position、transform实现元素垂直居中。

5、使用position结合margin：auto实现垂直居中。

6、使用 display :table和 vertical-align 对容器里的文字进行垂直居中, 父元素使用display:table,子元素使用display:table-cell属性来模拟表格，子元素设vertical-align:middle即可垂直居中。

7、通过verticle-align:middle实现行内垂直居中。

 

（3）常见问题：

1、使用line-height设置垂直居中时，为什么设置line-height:100%不管用？

2、verticle-align:middle相对父元素不能垂直居中？

（4）解决方案：

1、 从官方文档看linr-height设置百分比是基于当前字体尺寸的百分比，所以这里的百分比是不是相对父元素而言的，而是相对于字体尺寸的， 所以想要用line-height垂直居中，值不能设为100%，需设置跟当前父元素高度值。

2、vertical-align只作用于在同一行内的元素，它需要根据同一行找到参照的基线，而一个Box中由很多行很多元素组成， 它的垂直并不是相对于整个Box而言的，所以使用vertical-align:middle时不能对齐到父元素最中央的位置。 解决方法是定义一个同级的行内元素，让这个元素找到基线，或者配合line-height父元素内设置行高和box的高度一样，box内就只有一行，这时verticle-align:middle就能生效了。

（5）编码实战：

1、使用line-height

.line-height{
     width: 200px;
     height: 300px;
     background-color: #29bde0;
     line-height: 300px;
 }

 

class="line-height">
   

文本垂直居中

2、使用padding

.padding{
     margin-top: 50px;
     padding: 100px 0;
     width: 300px;
     background-color: #29bde0;
 }

使用padding垂直居中

 

3、使用table

.table{
     width: 200px;
     height: 300px;
     background-color: #29bde0;
     display: table;
 }
 .child2{
     display: table-cell;
     vertical-align: middle;
 }

     多行文本垂直居中多行文本垂直居中文多行本垂直居中文本
 

 

4、使用flex

.flex{
     width: 400px;
     height: 200px;
     background-color: #29bde0;
     display: flex;
     align-items: center;
     text-align: center;
 }
 .child1{
     width: 100px;
     height: 100px;
     background-color: green;
 }

 

5、使用position与transform

.transform{
     width: 400px;
     height: 200px;
     background-color: #29bde0;
     position: relative;
 }
 .child3{
     background-color: yellow;
     width: 100px;
     height: 100px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
 }

 

6、position与margin：auto

.margin{
     width: 400px;
     height: 200px;
     background-color: #29bde0;
     position: relative;
 }
 .child4{
     background-color: yellow;
     width: 100px;
     height: 100px;
     position: absolute;
     top: 0;
     bottom: 0;
    margin: auto;
 }

 

7、line-height结合vertical:middle实现多行文本居中

.vertical{
     background-color: #29bde0;
     width: 400px;
     height: 200px;
    line-height: 200px;
 }
 .child5{
     background-color: yellow;
     width: 150px;
     display: inline-block;
     vertical-align: middle;
     line-height: 20px;
 }

     
多行文本垂直居中多行文本垂直居中文多行本垂直居中文本多行文本垂直居中
 

 

（6）拓展思考：

在实现垂直居中的情况下，怎样让元素水平方向也居中？

常用到的水平居中：

1、行内元素水平方向居中text-aligh

2、定宽块级元素，给元素设置margin:0 auto实现水平居中。

3、弹性布局下父元素添加：justify-content: center;

4、position结合transform时：水平方向left:50%，再用translate X轴方向偏移-50%

5、使用position结合margin时：水平方向添加left和right的相同定位值。

 

（7）参考文献：

【1】菜鸟教程CSS 布局 - 水平 & 垂直对齐 http://www.runoob.com/css/css-align.html

【2】菜鸟教程flex布局 http://www.runoob.com/w3cnote/flex-grammar.html

 

（8）更多讨论：

Q1：问题：padding可以实现垂直居中，为什么不推荐用margin呢？
A1：回答：使用margin有重叠外边距的可能性，所以不推荐，某些情况也可以用，但要主要外边距重叠的问题。

Q2：问题：为什么在结合position定位时，使用transform：translate（-50%，-50%）可以让元素居中，-50%代表什么？
A2：回答：translate偏移的百分比值是相对于自身大小的，-50%就是对自身偏移50%的宽高。

Q3：问题：使用margin：auto实现水平居中时需要注意什么？
A3：回答：元素需为定宽的块级元素。

 

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~