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





纯CSS完美实现垂直水平居中的6种方式

纯CSS完美实现垂直水平居中的6种方式 时间 2016-07-29 13:12:19 SegmentFault 原文  https://segmentfault.com/a/119...
  • shiyuqiong
  • shiyuqiong
  • 2016年07月30日 22:16
  • 1864

CSS 元素垂直居中的 6种方法

转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E...
  • wolinxuebin
  • wolinxuebin
  • 2012年05月30日 09:56
  • 345506

[分享] 纯CSS完美实现垂直水平居中的6种方式

前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多,但是都不...
  • ppqiaoping
  • ppqiaoping
  • 2016年07月29日 11:27
  • 1167

css布局-多行文字垂直居中

场景一:父元素 高度固定,如何使其中的文字垂直居中? 代码: *{padding: 0;margin:0;font-size: 12px;} div{flo...
  • hdchangchang
  • hdchangchang
  • 2015年07月28日 16:59
  • 12821

使用css3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 代码两个关键点:1.上下左右均0位置定位; ...
  • jingtian678
  • jingtian678
  • 2017年06月22日 16:43
  • 790

css垂直居中和水平居中方法总结

CSS垂直居中总结 文档转载网络并做整合                                                                            ...
  • Webgongcheng
  • Webgongcheng
  • 2016年08月11日 10:33
  • 435

css - 垂直居中

参考: CSS常见布局及解决方案 把简单做好也不简单-css水平垂直居中 单行文本垂直居中 需要满足两个条件: 1.元素内容是单行,并且其高度是固定不变的。 2.将其line-height...
  • sinat_31057219
  • sinat_31057219
  • 2018年02月08日 10:48
  • 13

14 css(已解决)图片垂直居中 父元素为relative且height未知(chrome)

蓝色的全解析http://www.blueidea.com/tech/web/2006/3231.asp 1.父级元素居中:text-align:                    no 2.v...
  • fancivez
  • fancivez
  • 2015年03月30日 16:25
  • 622

css 文本和div垂直居中方法汇总

本文总结了垂直居中的各种方法,包括单行文本垂直居中、多行文本垂直居中以及div垂直居中,列出了多种情况对应的方法。读者可以根据实际需要选择合适的方法。...
  • u014607184
  • u014607184
  • 2016年07月04日 14:10
  • 26293

垂直居中的7种方法

1、水平垂直居中 垂直居中 div.center{ text-align:center; ...
  • cwzhsi
  • cwzhsi
  • 2015年04月07日 22:17
  • 1633
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中垂直居中大总结以及实现原理分析
举报原因:
原因补充:

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