CSS中垂直居中大总结以及实现原理分析

CSS中需要设置垂直居中的情况有很多，比如：文本在块元素中的居中，行内非替换元素在块元素中的居中，块元素在块元素中的居中等，其中每一种大情况又分为多个小场景，下面分情况总结并分析原理

一、文本在块元素中的垂直居中

1.1　单行文本在块元素中的垂直居中

1.1.1　块元素的height确定

<div>   <span>single line</span></div>

div{  width:200px;  border:1px solid red;  height:100px;  line-height:100px;}

实现原理：文本在行内框中默认处于居中位置，也就是说如果font-size=14px, line-height=20px,那么行间距就等于line-height-font-size=6px, 然后浏览器会把这6px均分成两个3px分别加在文本内容区的上部和下部。因此文本内容区默认情况下在行内框中是垂直居中的，因此如果要使得这个文本在块元素中垂直居中，就让元素的line-height等于块元素的height即可，通俗理解就是让元素的行内框与块元素的边框重叠，又因line-height属性是可继承的，因此在块元素中设置height:100px, line-height:100px即可实现块中文本的垂直居中。

1.1.2　块元素的height不确定

div{  width:200px;  border:1px solid red; /*  height:100px; */  line-height:100px;  margin:0 auto;}

原理：这种情况更好分析，给块元素设置一个适用于页面布局的line-heght值即可，只要存在line-height值，文本元素就在其中垂直居中，因为块元素在没有设置具体高度时，其高度值由行框的高度决定，此时默认块元素的height=line-height。

1.2　多行文本在块元素中的垂直居中

    <div>      <span>line1<br>line2</span>    </div>

div{  width:200px;  border:1px solid red;  height:100px;  line-height:100px;}span{display:inline-block;  font-size:10px;  line-height: 1.4em;  background-color: red;  vertical-align: middle;  border: 1px solid black;}

原理：给span元素设置一个display:inline-block属性，就把文本line1和line2上下两个行内框合并为一个大的行内框。如图所示：

将line1和line2合并未一个行内框后，就可以看做是单行文本在块元素中垂直居中的情况，之后参考情况1.1来设置div和span的属性即可。

二、块元素在块元素中的垂直居中

2.1　父元素的height确定，子元素的height也确定

    <div>        <p> </p>    </div>

div{  width:200px;  border:1px solid red;  height:100px;}p{  background-color: yellow;  height:40px;  margin:30px auto;}

原理：给子元素设置属性margin-top=margin-bottom=（父元素的height－子元素的height）/２即可。