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

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

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

由簡至繁：

行內元素的水平置中    

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

1 #container{2     text-align:center; 3 }

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

　　Demo 

 

塊狀元素的水平置中    

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

1 #center{2     margin:0 auto;3 }

　　Demo

 

多個塊狀元素的水平置中    

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

1 #container{2     text-align:center;3 }4 5 #center{6     display:inline-block;7 }

　　Demo

 

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

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

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

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

　　

學會使用flexbox

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

1 #container {2     display: flex;3 }

 

flexbox的預設為一個區塊層級元素，如果需要定義為一個行內級的元素，同理：

1 #container {2     display: inline-flex;3 }

 

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

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

1 #container{2     justify-content:center;3     display:flex;4 }

　　Demo

 

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

法一.

絕對位置與負邊距實現。

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

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     width:100px; 7     height:100px; 8     position:absolute; 9     top:50%;10     left:50%;11     margin:-50px 0 0 -50px;12 }

　　Demo

 

法二.

絕對位置與margin。

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

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     position:absolute; 7     margin:auto; 8     top:0; 9     bottom:0;10     left:0;11     right:0;12 }

　　（同上故不再）

　　Demo

 

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

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

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

核心代碼如下：

1 #container{2     display:table-cell;3     text-align:center;4     vertical-align:middle;5 }6 7 #center{8 9 }

　　Demo

 

 法二. Css3顯威力

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

核心代碼如下：

 1 #container{ 2     position:relative; 3 } 4  5 #center{ 6     position: absolute; 7     top: 50%; 8     left: 50%; 9     transform: translate(-50%, -50%);10 }

　　Demo

 

法三. flex布局輕鬆解決

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

核心代碼如下：

1 #container{2     display:flex;3     justify-content:center;4     align-items: center;5 }6 7 #center{8 9 }

　　Demo

 

一些總結    

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

某些瀏覽器仍需使用首碼寫法:

1 .flexboxtest{2   display: flex;3   display: -webkit-flex; //Safari仍舊需要使用特定的瀏覽器首碼4 }

　　

瀏覽器對最新版本的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屬性

 

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