关闭

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

226人阅读 评论(0) 收藏 举报
分类:

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即可。





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:259次
    • 积分:22
    • 等级:
    • 排名:千里之外
    • 原创:2篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档