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

对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。由于我们大搜车的日常工作中已经不再需要理会低版本IE，所以本文所贴出的方法，是没有去考虑IE的，如果有兼容需要，可以参见这篇文章： http://www.cnblogs.com/Dudy/p/4085292.html 。另外，文中的css都是用less书写的，如果看不懂less，可以把我给的demo链接打开，然后在控制台中查看最终的css，或者是点击codepen上的“View Compiled”按钮，可以查看编译后的css

先看一张图，这是去年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/did111155