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

原创 2016年08月30日 15:00:52

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





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

盘点8种CSS实现垂直居中水平居中的绝对定位居中技术

我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { ...

css实现垂直居中的方法

CSS 垂直居中问题总结

在做页面的时候,不论PC端,还是移动端,都会遇到各种垂直居中的问题,在这里,我列举了一些,有些是在工作中遇到了,有的是自己整理的,还不是特别全面,以后会后续更新,如果有不同看法,或者有新的这种CSS垂...

css 总结 【垂直居中】【图片下方文字】

1.【垂直居中实现方法】 /* 代码实现: * 设定宽度和高度,父节点为 position:relative; CSS是这样写的: */ .selector { posit...

CSS垂直居中网页布局实现的5种方法

CSS 垂直居中 vertical-align

纯css实现div中未知尺寸图片的垂直居中

1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有...

CSS3实现水平垂直居中

水平垂直居中的制作大家都有碰到过,水平居中方法好处理,但是垂直居中的话还是让很多人头痛过,我也碰到很多盆友来询问如何让元素水平垂直居中。前面也专门讨论过如何让图片,单行文本和多行文本实现各种浏览器的水...

CSS实现垂直居中的5种方法

方法一 这个方法把一些 div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align property 属性。 Content goes here #w...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)