水平居中和垂直居中

1.水平居中

(1) 文本、圖片等行內元素的水平居中

　　給父元素設置text-align:center能夠實現文本、圖片等行內元素的水平居中。

(2) 肯定寬度的塊級元素的水平居中

　　經過設置margin-left:auto;和margin-right:auto;來實現的。

(3) 不肯定寬度的塊級元素的水平居中

　　方法一:

　　使用table標籤，table自己並非塊級元素，若是不給它設定寬度的話，它的寬度由內部元素的寬度「撐起」，但即便不設定它的寬度，僅設置margin-left:auto;和margin-right:auto;就能夠實現水平居中!

　　將須要居中的部分包含在table標籤內，對table設置margin-left:auto;和margin-right:auto;就能夠使table水平居中，間接使須要居中的部分水平居中。

　　缺點：增長了無語意標籤，加深了標籤的嵌套層數。

<style type="text/css">
ul{list-style:none; margin:0; padding:0;}
.wrap{ width:500px; height:100px;}
table{margin-left:auto;margin-right:auto;}
.test li{float:left; display:inline; margin-right:5px;}
</style>

<div class="wrap">
 <table>
 <tbody>
 <tr>
 <td>
 <ul class="test">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 </td>
 </tr>
 </tbody>
 </table>
</div>

 

　　方法二：

　　改變塊級元素display爲inline類型，而後使用text-align:center來實現居中。

　　較方法一，好處是不用增長無語義標籤，簡化了標籤的嵌套深度。壞處，將塊級元素的display類型改成inline，缺乏了一些塊級元素的功能，好比高寬。

<style>
.wrap{ width:500px; heighe:100px;}
.test{text-align:center; padding:5px;}
.test li{display:inline;}
</style>

<div class="wrap">
 <ul class="test">
 <li>1</li>
 </ul>
 <ul class="test">
 <li>1</li>
 <li>2</li>
 </ul>
 <ul class="test">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
</div>

 

　　方法三:

　　經過給父元素設置float，而後父元素設置position:relative和left:50%，子元素設置position:relative和left:-50%來實現水平居中。

　　能夠保留塊級元素仍以display:block的形式顯示，並且不添加無語義標籤，不增長嵌套深度，但缺點是設置了position:relative，帶來必定的反作用。

<style type="text/css"> ul{ list-style:none; margin:0; padding:0;} .wrap{ background:#000; width:500px; height:100px;} .test{ clear:both; padding-top:5px; float:left; position:relative; left:50%;} .test li{ float:left; display:inline; margin-right:5px; position:relative; left:-50%;} .test a{ float:left; width:20px; height:20px; text-align:center; line-height:20px; background:#09f; color:#fff; text-decoration:none;} </style> <div class="wrap"> <ul class="test"> <li><a href="#">1</a></li> </ul> <ul class="test"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <ul class="test"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </div>

當父元素和子元素都沒有定義寬度的狀況下實現水平居中： 

display:inline-block 
能夠使用text-align:center和display:inline-block相結合，這個技巧須要一個父元素。 
HTML代碼: 

1 <div class="navbar"> 2 <ul> 3 <li><a href="/">Home</a></li> 4 … 5 </ul> 6 </div> 

CSS代碼: 

 1 .navbar {  2 text-align:center;  3 }  4 .navbar ul {  5 display:inline-block;  6 }  7 .navbar li {  8 float:left;  9 } 10 .navbar li + li { 11 margin-left:20px; 12 } 

IE系列IE8+支持，要IE7 IE6 支持須要加入如下代碼使display:inline像display:inline-block同樣 

1 .navbar ul { 2 *display:inline; 3 *zoom:1; 4 } 

position:relative 
使用position:relative與float相結合的技巧及其浮動和定位參照物的關係，這個技巧須要兩個父元素，一個用來定位而另一個用來避免出現滾動條。 
HTML代碼: 

1 <div class="navbar"> 2 <div> 3 <ul> 4 <li><a href="/">Home</a></li> 5 … 6 </ul> 7 </div> 8 </div> 

CSS代碼: 

 1 .navbar {  2 overflow:hidden;  3 }  4 .navbar > div {  5 position:relative;  6 left:50%;  7 float:left;  8 }  9 .navbar ul { 10 position:relative; 11 left:-50%; 12 float:left; 13 } 14 .navbar li { 15 float:left; 16 } 17 .navbar li + li { 18 margin-left:20px; 19 } 

IE7下須要加入下列代碼支持： 

1 .navbar { 2 position:relative; 3 } 

display:table 
若是向使用極少的標籤實現，這個方法是個不錯的選擇。 
HTML代碼: 

1 <ul class="navbar"> 2 <li><a href="/">Home</a></li> 3 … 4 </ul>

CSS代碼: 

 1 .navbar {  2 display:table;  3 margin:0 auto;  4 }  5 .navbar li {  6 display:table-cell;  7 }  8 .navbar li + li {  9 padding-left:20px; 10 } 

不支持IE7及一下瀏覽器，其餘的主流瀏覽器都支持。 

display:inline-flex 
這個方法須要使用 flex-layout 的知識。 
HTML代碼: 

 

1 <div class="navbar"> 2 <ul> 3 <li><a href="/">Home</a></li> 4 … 5 </ul> 6 </div> 

CSS代碼: 

 1 .navbar {  2 text-align:center;  3 }  4 .navbar > ul {  5 display:-webkit-inline-box;  6 display:-moz-inline-box;  7 display:-ms-inline-flexbox;  8 display:-webkit-inline-flex;  9 display:inline-flex; 10 } 11 .navbar li + li { 12 margin-left:20px; 13 } 

使用CSS fit-content 值 
下面看看如何用fit-content建立一個包含子元素浮動的未知寬度的導航。 
HTML代碼: 

 

1 <div class="navbar center"> 2 <ul> 3 <li><a href="/">Home</a></li> 4 <li><a href="/">About us</a></li> 5 <li><a href="/">Our products</a></li> 6 <li><a href="/">Customer support</a></li> 7 <li><a href="/">Contact</a></li> 8 </ul> 9 </div> 

CSS代碼: 

代碼以下:

1 .center ul{ 2 width: -moz-fit-content; 3 width: -webkit-fit-content; 4 width: fit-content; 5 margin: auto; 6 } 

瀏覽器支持度較低 只Chrome和Firefox這樣的-webkit- -moz-內核瀏覽器。固然之後慢慢會發展起來的。 
這個方式是推進瀏覽器發展的一個新的東西，目前供應於因此能夠寫前綴的瀏覽器，並無工做在IE9和IE9如下。 
根據你的需求來選擇合適的方法吧，display:inline-block兼容性較好，flex-box將會用於將來。

2.垂直居中

　　(1) 父元素高度不肯定的文本、圖片、塊級元素的垂直居中

　　經過給父容器設置相同上下邊距實現的，即設置padding-top和padding-bottom。

　　(2)父元素高度肯定的單行文本的垂直居中

　　經過給父元素設置line-height來實現，line-height值和父元素高度值相同。

　　(3)父元素高度肯定的多行文本、圖片、塊級元素的垂直居中

　　CSS中有一個用於垂直居中的屬性vertical-align，但只有當父元素爲td或者th時，這個屬性才生效，對於其餘塊級元素，如div,p等，默認狀況下是不支持vertical-align屬性的。在firefox和ie8下，能夠設置塊級元素的display:table-cell來激活vertical-align屬性，但ie6和ie7並不支持display:table-cell。

　　方法一：

　　直接使用table，由於td標籤默認下就隱式設置了vertical-align:middle。

　　方法二：

　　對支持display:table-cell的ie8和firefox用display:table-cell和vertical-align:middle來實現居中，對不支持display:table-cell的ie6和ie7，使用特定格式的hack。

<style type="text/css"> .mb10{margin-bottom:10px;} .wrap{background:#000;width:500px;color:#fff;margin-bottom:10px;height:100px;display:table-cell;vertical-align:middle;*position:relative;} .test{width:200px;height:50px;background:#f00;} .verticalWrap{*position:absolute;*top:50%;} .vertical{*position:relative;*top:-50%;} </style> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="vertical"> hello world<br /> hello world<br /> hello world </div> </div> </div> </div> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <img src="" class="vertical" /> </div> </div> </div> <div class="mb10"> <div class="wrap"> <div class="verticalWrap"> <div class="test vertical"></div> </div> </div> </div>