解读CSS布局之水平垂直居中_html/css_WEB-ITnose

对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE，所以本文所贴出的方法，是没有去考虑IE的，如果有兼容需要，可以参见这篇文章： http://www.cnblogs.com/Dudy/p/4085292.html

先看一张图，这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的：

如图所示，CSS布局是可以分为几大块的：

盒子内部的布局 文本的布局 盒模型本身的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 正常流normal flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的布局 table布局上下文下的布局 css grid布局上下文下的布局

所有的CSS布局其实都是围绕着这些布局模块来的，水平垂直居中也一样。

一. 文本的水平垂直居中

line-height + text-align:center

DEMO链接

代码：

    水平垂直居中水平垂直居中

      
查看更多关于解读CSS布局之水平垂直居中_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did108702