摘要：前言布局中經(jīng)常會(huì)遇到元素水平居中的需求今天根據(jù)以前的學(xué)習(xí)筆記以及看過(guò)的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。文字的水平垂直居中文字水平居中文字的水平垂直居中在于同高然后。

布局中經(jīng)常會(huì)遇到元素水平居中的需求,今天根據(jù)以前的學(xué)習(xí)筆記?以及看過(guò)的一些技術(shù)博客做個(gè)元素水平居中的小結(jié)。

    //圖片地址為http://static.jsbin.com/images/dave.min.svg
 

.container{
    height:300px;
    width:300px;
    background:yellow;
    text-align:center;
    vertical-align:middle;
    display:table-cell; 
}
img{
    background-color: #333;
    height:230px;
    width:230px;
}

這種方法是通過(guò)設(shè)置display為table-cell,然后設(shè)置text-align、vertical-align為center來(lái)實(shí)現(xiàn)圖片位于父容器中的水平垂直居中,但是缺點(diǎn)是父div無(wú)法通過(guò)設(shè)置margin:0 auto來(lái)水平居中。

下面來(lái)一個(gè)使圖片能在父元素中水平垂直居中,父元素也能水平居中的方法。
使用padding或margin填充

.container{
    margin: 80px auto;
    width: 300px;
    height: 300px;
    background-color: yellow;
}
img{
    width: 100px;
    height: 100px;
    padding: 100px; //margin:100px;也可以。
}

該方法是設(shè)置好img的長(zhǎng)寬,然后和父容器之間長(zhǎng)寬的差距用padding來(lái)彌補(bǔ)。效果見(jiàn)下圖。

此方法是參考了大搜車(chē)前端博客中的一篇CSS布局的博文,作者是覃業(yè)博,原文是針對(duì)父div嵌套子div來(lái)到達(dá)水平垂直居中的目的,我這里div包裹的子元素img,和子元素是div的樣式設(shè)置有些許不一樣。

      文字水平居中

.container{
    line-height:300px;
    width:300px;
    line-height:300px;
    background:yellow;
    text-align:center;
    margin:0 auto;
}

文字的水平垂直居中在于line-height＋line-height同高,然后text-align:center。

先上代碼:

  
  

    
呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵
呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵
  
 

.super-element{
    width: 100%;
    height: 400px;
    background-color: #ccc;
}

.layout-helper{
    float: left;
/*     display:inline-block; */    
    position: relative;
    background:pink;
    left: 50%;
    top: 50%;
}

.sub-element{
    position: relative;
    left: -50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%);
    background-color: #333;
    color: #fff;
}

效果圖:

該方法參考大搜車(chē)前端博客中的一篇CSS布局的博文,中心思路就是將需要居中的元素sub-element的父元素layout-helper設(shè)置top、left偏移50%,然后設(shè)置float使layout-helper縮緊寬度, 再設(shè)置sub-element的left為-50%,此時(shí)sub-element在水平方向就居中了,而在垂直方向上因?yàn)閟ub-element的父元素layout-helper高度是不確定的,所以給sub-element設(shè)置top:-50%因計(jì)算不出而無(wú)效,此時(shí)用到了transform:translateY(-50%);將sub-element偏移-50%,就達(dá)到了居中的效果。以上使layout-helper縮緊寬度設(shè)置display:inline-block同樣可以達(dá)到效果。但是如果sub-element內(nèi)容一多,就會(huì)超出父元素,設(shè)置super-element為overflow:auto;就會(huì)出現(xiàn)以下效果。

針對(duì)這個(gè)bug,原文作者覃業(yè)博也有一個(gè)解決方案,利用元素超出父元素的左邊不會(huì)產(chǎn)生滾動(dòng)條的特性,但是我沒(méi)怎么悟透把他那個(gè)方案應(yīng)用到上面這個(gè)實(shí)例當(dāng)中,感興趣的人請(qǐng)戳大搜車(chē)前端博客中的一篇CSS布局的博文,個(gè)人覺(jué)得把super-element設(shè)置overflow:hidden也可以,sub-element再長(zhǎng)也就兩邊頂格。

還有一種通過(guò)設(shè)置添加占位div和設(shè)置占位div的margin-bottom:-50%來(lái)使元素居中的方案,先上圖:

.super-element{
    width: 400px;
    height: 400px;
    margin:0 auto;
    background-color:pink;
}
.layout-helper{
    width: 100%;
    height: 50%;
    margin-bottom:-50px;
}
.sub-element{
    position: relative;
    left: 50%;
    transform:translateX(-50%);
    width: 100px;
    height:100px;
    background-color:yellow;
}

效果圖:

其思想就是在super-element中設(shè)置一個(gè)占super-element寬100%和高50%的div塊,我這里命名layout-helper,然后設(shè)置它的margin-bottom為sub-element高度的一半,后面接著的sub-element就垂直居中了,然后再設(shè)置sub-element的position:relative;left:50%;transform:translateX(-50%);水平也居中了。這里有個(gè)注意點(diǎn),super-element的高度需要確定,這樣才能使layout-helper的heigh:50%有效,還有l(wèi)ayout-helper的margin-bottom設(shè)置的負(fù)高度為sub-element高度的一半。這種水平垂直居中方式兼容性較好。

此外還有一種使用定位和margin-top＋margin-left為負(fù)子元素長(zhǎng)寬來(lái)垂直水平居中的方法。上圖:

.super-ele{
    position:relative;
    width:300px;
    height:300px;
    margin:100px auto;
    background:pink;
}

.sub-ele{
    position:absolute;
    width:100px;
    height:100px;
    background:yellow;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

這種方法也是要設(shè)置子元素長(zhǎng)和寬并且在設(shè)置margin-top、margin-left的時(shí)候去匹配子元素長(zhǎng)寬的一半。

元素水平居中的技巧還有很多,還有使用Flex的方法,今天先到這里,等我悟透了再慢慢填補(bǔ)文章,以上實(shí)例如有錯(cuò)誤存在,歡迎各位及時(shí)指出。

參考:大搜車(chē)前端博客中的一篇CSS布局的博文