转载:解读CSS布局之-水平垂直居中(1)

本文转自http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/，以及大地dudy的博客http://www.cnblogs.com/Dudy/p/4085292.html。　　

 

 

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

CSS布局是可以分为几大块的：

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

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

 

一. 文本的水平垂直居中

line-height + text-align:center

 

代码：

<div class='wrap'>  
  水平垂直居中水平垂直居中
</div>  

html,body{  
  margin: 0;
}

.wrap{
  line-height: 400px;
  text-align:center;

  height: 400px;
  font-size: 36px;
  background-color: #ccc;
}

这种方法只适合单行文字的水平垂直居中.

 

二. 利用盒模型的水平垂直居中

我们一般讲的盒模型都是说的块级盒的盒模型，也只有块级盒的盒模型用得多一点，块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的，也就说我任一个子盒子的水平和垂直方向的边与最外面盒子的间距都是可以控制的，因此也就有如下居中方法：

padding填充

代码：

<div class="wrap">  
  <div class="content"></div>
</div>  

@wrapWidth : 400px;

.wrap{
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: @wrapWidth;
  height: @wrapWidth;
  background-color: #ccc;
}

.content{
  @contentWidth : 100px;
  width: @contentWidth;
  height: @contentWidth;
  padding: (@wrapWidth - @contentWidth) / 2;
  background-color: #333;
  background-clip:content-box;
}


也可以用css3的calc()动态计算:

<div class="wrap">  
  <div class="content"></div>
</div>  

.wrap{
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  height: 400px;
  background-color: #ccc;
  .content{
    padding: -webkit-calc(~"(100% - 100px) / 2");
    padding: calc(~"(100% - 100px) / 2");
    width: 100px;
    height: 100px;
    background-color: #333;
    background-clip: content-box;
  }
}

注意这里我在calc中使用了一个~""的写法，这是less中的一个语法，告诉less这里不被less所编译，要是被less编译了的话，css的calc函数的参数就不是100% - 100px，而是0%了。

 

margin填充

 

代码：

<div class="wrap">  
  <div class="ele"></div>
</div>  

.wrap{
  @wrapHeight : 400px;
  @contenHeight : 100px;
  overflow: hidden;
  width: 100%;
  height: @wrapHeight;
  background-color: #ccc;
  .ele{
    margin-left: auto;
    margin-right: auto;
    margin-top: (@wrapHeight - @contenHeight) / 2;
    width: 100px;
    height: @contenHeight;
    background-color: #333;
    color: #fff;
  }
}

使用margin填充我们需要知道元素的宽度，这点不太灵活，不过CSS3搞出了一个加fit-content的属性值，可以动态计算元素的宽度。