转载：解读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值的不同不仅仅可以实现居中，还可以将其放在上面下面等。缺点是父元素需定高

转载于:https://www.cnblogs.com/forrestRun/p/4697308.html