转载：解读CSS布局之-水平垂直居中（3）

标签：

四. float布局上下文下的水平垂直居中

float + -50%

DEMO链接

代码：

<div class="wrap">  
  <div class="ele">
    <div class="ele-inner">居中居中居中居中居中居中<br>居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中居中居中居<br>中居中居中居中居中居中居中</div>
  </div>
</div>  

.wrap{
  float: left;
  width: 100%;
  height: 400px;
  background-color: #ccc;
  .ele{
    float: left;
    position: relative;
    left: 50%;
    top: 50%;
  }
  .ele-inner{
    position: relative;
    left: -50%;
    -webkit-transform : translate3d(0, -50%, 0);
    transform : translate3d(0, -50%, 0);
    background-color: #333;
    color: #fff;
  }
}

这种方法的原理，首先是利用float属性将需要居中的元素的父元素.ele的宽度收缩，然后left:50%将.ele的左边和水平中线对齐，这个时候还没居中，还需要将其往回拉自身宽度的50%，于是.ele-inner便是真正需要水平居中的元素，我给它一个position:relative，将其往回拉自身宽度50%就行了。对于垂直方向，依然是先将.ele top:50%到垂直方向中点，但是这时给.ele-inner top:50%是不起作用的，因为如果没给父元素明确高度的话，这个50%是计算不出来的，因此，就有了transform : translate3d(0, -50%, 0)。

这种方法的好处是元素可以不定宽，任何时候都可以做到居中

我当时在w3cplus的站上发现这个方法后，当时觉得这个方法很好，兼容性好，又还可以不定宽，但当我用了一段时间后，发现了一个问题：

就是当居中元素的父元素left:50%时，如果元素宽度足够大，会超出外面的容器，而如果外面的容器又正好是overflow:auto的话，那就会在外面产生滚动条，问题DEMO链接在这里，后来我找到了一个办法：DEMO链接 ，基本思想就是利用元素超出父元素的左边不会产生滚动条的特性，有点奇淫技巧，但是能解决问题，有兴趣的可以看看

margin-bottom : -50%

DEMO链接

代码：

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

.wrap{
  float: left;
  width: 100%;
  height: 400px;
  background-color: #ccc;
  @contentHeight : 100px;
  .placeholder{
    float: left;
    width: 100%;
    height: 50%;
    /*居中元素.content高度一半*/
    margin-bottom: -(@contentHeight / 2);
  }
  .content{
    position: relative;
    left: 50%;
    transform:translate3d(-50%, 0, 0);
    clear: both;
    /*演示用，实际不需要定宽*/
    max-width: 100px;
    height: @contentHeight;
    background-color: #333;
  }
}

这种方法是先让占位元素.placeholder占据50%高度，然后给一个居中元素高度一半的负的margin-bottom，然后下面的元素只要跟着摆放就能垂直居中了。水平方向就是利用translate做偏移，这个没什么好说的，你也可以换成其他办法。

这种方法就是各种固定死，首先最外层的父容器需要一个固定高度，以让.placeholder的height:50%有效，然后，margin-bottom也需要固定死，而且得需要知道居中元素高度。单纯就水平方向来说，这个方法比较适合需要兼容低版本IE的固定式布局的项目，因为兼容性好。

五.BFC布局上下文下的水平垂直居中

BFC的全称是块级排版上下文，这里有篇文章对齐进行了简单的介绍，BFC布局上下文下的布局其实就是利用盒模型本身进行的布局，前面在利用盒模型布局的那一节中已经讲过了，这里就不重复了

六.IFC布局上下文下的水平垂直居中

IFC又是个什么概念呢，你可以看看官方文档，也可以简单的理解为 display为inline性质的行级元素的布局。

text-align:center + vertical-align:middle

DEMO链接

代码：

<div class="wrap">  
  <div class=‘placeholder‘><!--占位元素，用来作为居中元素的参照物--></div>
  <div class="ele"></div>
</div>  

.wrap{
  width: 100%;
  height: 400px;
  /* min-height: 400px; */
  text-align:center;
  font-size: 0;
  background-color: #ccc;
  .placeholder,
  .ele{
    vertical-align: middle;
    display: inline-block;
  }
  .placeholder{
    overflow: hidden;
    width: 0;
    min-height: inherit;
    height: inherit;
  }
  .ele{
    width: 100px;
    height: 100px;
    background-color: #333;
  }
}

行级元素会受到text-align和vertical-align的影响，关于vertical-align，不太好理解，我多贴几篇文章：@灵感idea 的，张鑫旭的，MDN上的，css-trick上的，以及官方文档，这里首先是用text-center让inline-block水平居中，然后给一个vertical-align:middle，但是仅仅给vertical-align:middle是不够的，因为此时它还没有vertical-align对齐的参照物，所以就给了一个占位的inline-block，它的高度是100%。

这个方法对于居中元素不需要定宽高，而且元素根据vertical-align值的不同不仅仅可以实现居中，还可以将其放在上面下面等。缺点是父元素需定高

转载：解读CSS布局之-水平垂直居中（3）

标签：

原文地址：http://www.cnblogs.com/forrestRun/p/4697308.html