【前端攻略】最全面的水平垂直居中方案與flexbox布局

最近又遇到許多垂直居中的問題，這是Css布局當中十分常見的一個問題，諸如定長定寬或不定長寬的各類容器的垂直居中，其實都有很多種解決方案。而且在Css3的flexbox出現之后，解決各類居中問題變得更加容易了。搜了搜園子內關於flexbox的文章覺得很多不夠詳盡，故想借介紹flexbox的同時好好總結一番各類垂直居中的方法。由簡至繁：

 

行內元素的水平居中    

要實現行內元素（<span>、<a>等）的水平居中，只需把行內元素包裹在塊級父層元素（<div>、<li>、<p>等）中，並且在父層元素CSS設置如下：

#container{
    text-align:center; 
}

並且適用於文字，鏈接，及其inline或者inline-block、inline-table和inline-flex。

Demo 

 

塊狀元素的水平居中    

要實現塊狀元素（display:block）的水平居中，我們只需要將它的左右外邊距margin-left和margin-right設置為auto，即可實現塊狀元素的居中，要水平居中的塊狀元素CSS設置如下：

#center{
    margin:0 auto;
}

Demo

 

多個塊狀元素的水平居中    

要實現多個水平排列的塊狀元素的水平居中，傳統的方法是將要水平排列的塊狀元素設為display:inline-block，然后在父級元素上設置text-align:center，達到與上面的行內元素的水平居中一樣的效果。

#container{
    text-align:center;
}

#center{
    display:inline-block;
}

Demo

  

使用flexbox實現多個塊狀元素的水平居中

在使用之前，首先介紹一下flexbox。

Flexbox布局（Flexible Box)模塊旨在提供一個更加有效的方式制定、調整和分布一個容器里的項目布局，即使他們的大小是未知或者是動態的。是CSS3 中一個新的布局模式，為了現代網絡中更為復雜的網頁需求而設計。

Flexbox 已經被瀏覽器快速支持。Chrome 22+, Opera 12.1+, 和 Opera Mobile 12.1+ ，firefox18+已經支持了本文中所描述的 Flexbox。

　　

學會使用flexbox

要為元素設置flexbox布局，只需將display屬性值設置為flex。

#container {
    display: flex;
}

flexbox的默認為一個塊級元素，如果需要定義為一個行內級的元素，同理：

#container {
    display: inline-flex;
}

flexbox由伸縮容器和伸縮項目組成。通過設置元素的display屬性為flex或者inline-flex可以得到一個伸縮容器。設置為flex的容器被渲染為一個塊級元素，而設置為inline-flex的容器則渲染為一個行內元素。而每一個被設置為flex的容器，它的內部元素都將變成一個flex項目，即是一個伸縮項目。簡單的說，flex 定義了伸縮容器內伸縮項目該如何布局。

回到正題，利用flexbox實現多塊狀元素的水平居中，只需要將父級容器的Css設置如下：

#container{
    justify-content:center;
    display:flex;
}

Demo

  

已知高度寬度元素的水平垂直居中    

法一 絕對定位與負邊距實現

利用絕對定位，將元素的top和left屬性都設為50%，再利用margin邊距，將元素回拉它本身高寬的一半，實現垂直居中。核心CSS代碼如下：

 #container{
     position:relative;
 }
 
 #center{
     width:100px;
     height:100px;
     position:absolute;
     top:50%;
     left:50%;
     margin:-50px 0 0 -50px;
 }

Demo

  

法二 絕對定位與margin

這種方法也是利用絕對定位與margin，但是無需知道被垂直居中元素的高和寬。核心代碼如下：

 #container{
     position:relative;
 }
 
 #center{
     position:absolute;
     margin:auto;
     top:0;
     bottom:0;
     left:0;
     right:0;
 }

（同上故不再截圖）

Demo

  

未知高度和寬度元素的水平垂直居中    

法一.  當要被居中的元素是inline或者inline-block元素

當要被居中的元素是inline或者inline-block的時候，可以巧妙的將父級容器設置為display:table-cell，配合text-align:center和vertical-align:middle即可以實現水平垂直居中。

核心代碼如下：

#container{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

#center{

}

Demo

  

法二. Css3顯威力

利用Css3的transform，可以輕松的在未知元素的高寬的情況下實現元素的垂直居中。

核心代碼如下：

 #container{
     position:relative;
 }
 
 #center{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

Demo

  

法三. flex布局輕松解決

使用flex布局，無需絕對定位等改變布局的操作，可以輕松實現元素的水平垂直居中。

核心代碼如下：

#container{
    display:flex;
    justify-content:center;
    align-items: center;
}

#center{

}

Demo

  

總結    

CSS3的transform和flex固然好用，但在項目的實際運用中必須考慮兼容問題，大量的hack代碼可能會導致得不償失。

某些瀏覽器仍需使用前綴寫法:

.flexboxtest{
  display: flex;
  display: -webkit-flex; //Safari仍舊需要使用特定的瀏覽器前綴
}

瀏覽器對最新版本的flexbox 的支持情況如下：

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+ (prefixed with -webkit-)
• Android 4.4+
• iOS 7.1+ (prefixed with -webkit-)

 

文中介紹的flex用法只是一小部分，flex還有着其他強大的功能。本文主要介紹水平垂直居中的方法，具體的flex教學，可以移步：圖解CSS3 Flexbox屬性

原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。