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)/2即可。