四. float布局上下文下的水平垂直居中
float + -50%
代码:
<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%
代码:
<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
代码:
<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值的不同不仅仅可以实现居中,还可以将其放在上面下面等。缺点是父元素需定高