CSS學習筆記－元素水平垂直居中

前言

佈局中常常會遇到元素水平居中的需求,今天根據之前的學習筆記?以及看過的一些技術博客作個元素水平居中的小結。

正文

圖片的水平垂直居中

<div class="container">
    <img src="">//圖片地址爲http://static.jsbin.com/images/dave.min.svg
</div>

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

這種方法是經過設置display爲table-cell,而後設置text-align、vertical-align爲center來實現圖片位於父容器中的水平垂直居中,可是缺點是父div沒法經過設置margin:0 auto來水平居中。

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

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

該方法是設置好img的長寬,而後和父容器之間長寬的差距用padding來彌補。效果見下圖。

此方法是參考了大搜車前端博客中的一篇CSS佈局的博文,做者是覃業博,原文是針對父div嵌套子div來到達水平垂直居中的目的,我這裏div包裹的子元素img,和子元素是div的樣式設置有些許不同。

文字的水平垂直居中

<div class="container">
      文字水平居中
</div>

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

文字的水平垂直居中在於line-height＋line-height同高,而後text-align:center。

利用float和元素設置偏移來水平垂直居中

先上代碼:

<div class="super-element">  
  <div class="layout-helper">
    <div class="sub-element">呵呵呵呵呵呵呵呵呵呵呵呵<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵<br>呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</div>
  </div>
</div>

.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;
}

效果圖:

該方法參考大搜車前端博客中的一篇CSS佈局的博文,中心思路就是將須要居中的元素sub-element的父元素layout-helper設置top、left偏移50%,而後設置float使layout-helper縮緊寬度, 再設置sub-element的left爲-50%,此時sub-element在水平方向就居中了,而在垂直方向上由於sub-element的父元素layout-helper高度是不肯定的,因此給sub-element設置top:-50%因計算不出而無效,此時用到了transform:translateY(-50%);將sub-element偏移-50%,就達到了居中的效果。以上使layout-helper縮緊寬度設置display:inline-block一樣能夠達到效果。可是若是sub-element內容一多,就會超出父元素,設置super-element爲overflow:auto;就會出現如下效果。

針對這個bug,原文做者覃業博也有一個解決方案,利用元素超出父元素的左邊不會產生滾動條的特性,可是我沒怎麼悟透把他那個方案應用到上面這個實例當中,感興趣的人請戳大搜車前端博客中的一篇CSS佈局的博文,我的以爲把super-element設置overflow:hidden也能夠,sub-element再長也就兩邊頂格。

還有一種經過設置添加佔位div和設置佔位div的margin-bottom:-50%來使元素居中的方案,先上圖:

<div class="super-element">  
  <div class="layout-helper"></div>
  <div class="sub-element"></div>
</div>

.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中設置一個佔super-element寬100%和高50%的div塊,我這裏命名layout-helper,而後設置它的margin-bottom爲sub-element高度的一半,後面接着的sub-element就垂直居中了,而後再設置sub-element的position:relative;left:50%;transform:translateX(-50%);水平也居中了。這裏有個注意點,super-element的高度須要肯定,這樣才能使layout-helper的heigh:50%有效,還有layout-helper的margin-bottom設置的負高度爲sub-element高度的一半。這種水平垂直居中方式兼容性較好。

此外還有一種使用定位和margin-top＋margin-left爲負子元素長寬來垂直水平居中的方法。上圖:

<div class="super-ele">
   <div class="sub-ele">
 </div>

.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;
}

這種方法也是要設置子元素長和寬而且在設置margin-top、margin-left的時候去匹配子元素長寬的一半。

結尾

元素水平居中的技巧還有不少,還有使用Flex的方法,今天先到這裏,等我悟透了再慢慢填補文章,以上實例若有錯誤存在,歡迎各位及時指出。

參考:大搜車前端博客中的一篇CSS佈局的博文