css實現未知尺寸元素水平垂直置中的方法

1.table表格

<table><tbody> <tr> <td>水平垂直置中的隨意內容</td> <td>水平垂直置中的隨意內容</td>…類似這樣的，

垂直置中對其來說，也是非常簡單的事。table cells 的 vertical-align:middle 就可以直接解決。所以實現起也來只要這樣一行代碼：

td{ vertical-align:middle; }

2.display:table-cell實現

代碼如下	複製代碼
<div id=”demo”>     <p>水平垂直置中的隨意內容</p>     </div> #demo{ display:table; width:500px; margin:10px auto; background:#eee; } #demo p{ display:table-cell;vertical-align:middle; height:100px;  }

該方法只相容ie8+.要解決相容問題的話，可能要用到下面這個通用方法：

代碼如下

複製代碼

html部分 <div class="wrap">     <div class="hack">         <div class="cnt">             content         </div>     </div> </div> /* CSS 部分的代碼實現：整體代碼參見上述 demo*/ .wrap{     width:500px;height:300px;border:3px solid #ddd;margin:0 auto;padding:20px;display:table;     *position:relative; } .hack{     display:table-cell;vertical-align:middle;     *position:absolute;*top:50%; } .cnt{     *position:relative;*top:-50%; }

3.inline-block實現

代碼如下	複製代碼
<div id=”demo”>     <p>水平垂直居www.111cn.net中的隨意內容</p>     </div>     #demo{     height:100px;     text-align:center;     }     #demo:after{     display:inline-block;     width:0;     height:100%;     vertical-align:middle;     content:”;     }     #demo p{     display:inline-block;     vertical-align:middle;     }

垂直方向的對齊排版需使用 vertical-align ，並且只應用於inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的對齊就基於每個 line box（行框） 的，簡單的說，inline level元素按照 Normal flow 水平排版出一行就會形成一個line box，其高度由內容形成，如果換行，則又是另一個line box，所有一段文本可能會分布在多個line box裡，這些不重疊的line box被稱作為a vertical stack of line boxes（一個垂直堆疊的線框集合）這些。同樣的該方法支援ie8+.

用inline-block布局會產生一個間隙的bug，雖然能解決，但是還是不推薦用。具體解決方案：

代碼如下

複製代碼

<div id=”demo”>     <p>這是一個終極實現的水平垂直置中執行個體</p>     <!–[if lt IE 8]><span></span><![endif]–>     </div>     #demo{     height:100px;     text-align:center;     font-size:0;     }     #demo:after,#demo span{     display:inline-block;     *display:inline;     *zoom:1;     width:0;     height:100%;     vertical-align:middle;     }     #demo:after{     content:”;     }     #demo p{     display:inline-block;     *display:inline;     *zoom:1;     vertical-align:middle;     font-size:16px;     }

這個方法基本無Bug了，支援ie6+也解決了間隙的bug.

補充方法：定義定位實現未知高度元素的垂直置中（相容IE5.5678910 firefox chrome）

需要在以上基礎上改變HTML結構，把img放在一個元素中間，如下：

代碼如下	複製代碼
<div class="box">     <p>             <img src="/nice_mb/08/1c/24769.jpg" />     </p> </div>

在支援display為table-cell的瀏覽器中依然用vertical-align:middle來實現，在IE5.5IE6IE7中利用定位來實現垂直置中，具體代碼如下：

代碼如下	複製代碼
.box {  border: 1px dashed #ccc;  height: 200px;  width: 200px;  overflow: hidden;  display: table-cell;  vertical-align: middle; *position:relative; } p { *position:absolute; *top:50%;  width: 100%;  text-align: center; } img { *position:relative; *top:-50%; }

　

實現絕對置中的另類方法

代碼如下	複製代碼
<style type="text/css"> .outer{  background:#9F6;  width:100%;  height:400px;  position:relative; } .inner{  width:50%;  height:50%;  background:#990;  margin:auto;  position:absolute;  left:0;  top:0;  right:0;  bottom:0; } </style> <div class="outer">   <div class="inner">絕對置中</div> </div>

相容性：IE8+、firefox、chrome

注意：這裡必須設定height屬性才能置中