CSS文本和div垂直置中方法樣本分析

在樣式布局中，我們經常碰到需要將元素置中。通過css實現元素的水平置中較為簡單：對文本，只需要對其父級元素設定text-align: center;，而對p等區塊層級元素，只需要設定其left和right的margin值為auto。要實現元素的垂直置中，有人會想到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<p>、<span>這樣的元素是沒有valign特性的，因此使用vertical-align對它們不起作用。因此我們需要通過別的方法去實現元素的垂直置中，下面我總結了幾種了常用垂直置中方法。

單行文本垂直置中

對於單行文本，我們只需要將文本行高(line-height)和所在地區高度(height)設為一致即可：

<!--html代碼-->    <p id="p1">        這是單行文本垂直置中       </p>/*css代碼*/           #p1{               width: 300px;               height: 100px;               margin: 50px auto;               border: 1px solid red;               line-height: 100px; /*設定line-height與父級元素的height相等*/               text-align: center; /*設定文本水平置中*/               overflow: hidden; /*防止內容超出容器或者產生自動換行*/           }

多行文本垂直置中

多行文本垂直置中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。

父級元素高度不固定

父級高度不固定的時，高度只能通過內部文本來撐開。這樣，我們可以通過設定內填充（padding）的值來使文本看起來垂直置中，只需設定padding-top和padding-bottom的值相等：

<!--html代碼-->    <p id="p1">            這是多行文本垂直置中，               這是多行文本垂直置中，               這是多行文本垂直置中，               這是多行文本垂直置中。       </p>/*css代碼*/           #p1{               width: 300px;               margin: 50px auto;               border: 1px solid red;               text-align: center; /*設定文本水平置中*/               padding: 50px 20px;           }

父級元素高度固定

本文一開始就提到css中的vertical-align屬性，但是它只對擁有valign特性的元素才生效，結合display: table;，可以使得p類比table屬性。因此我們可以設定父級p的display屬性：display: table;；然後再添加一個p包含常值內容，設定其display:table-cell;和vertical-align:middle;。具體代碼如下：

<!--html代碼-->    <p id="outer">        <p id="middle">            這是固定高度多行文本垂直置中，               這是固定高度多行文本垂直置中，               這是固定高度多行文本垂直置中，               這是固定高度多行文本垂直置中。           </p>    </p>/*css代碼*/           #outer{               width: 400px;               height: 200px;               margin: 50px auto;               border: 1px solid red;               display: table;           }           #middle{                display:table-cell;                vertical-align:middle;                 text-align: center; /*設定文本水平置中*/                 width:100%;              }

但是，在IE7中顯示效果如下：

這是因為IE7及以下的版本並不能很好的支援display:table和display:table-cell屬性，當然，如果你不考慮IE7以下的版本的瀏覽器，上述方法是可以實現垂直置中。如果把IE7及以下版本考慮進去，我們可以通過用到CSS hack的知識來設定針對不同瀏覽器的屬性。

<!--html代碼-->    <p id="outer">        <p id="middle">            <p id="content">                這是固定高度多行文本垂直置中(相容IE7)，                   這是固定高度多行文本垂直置中(相容IE7)，                   這是固定高度多行文本垂直置中(相容IE7)，                   這是固定高度多行文本垂直置中(相容IE7)。               </p>        </p>    </p>/*css代碼*/           #outer{               width: 400px;               height: 200px;               margin: 50px auto;               border: 1px solid red;               display: table;               *position:relative;  //相容IE7及以下版本           }           #middle{                display:table-cell;                vertical-align:middle;                 text-align: center; /*設定文本水平置中*/                 width:100%;               *position:absolute;   //相容IE7及以下版本               *top:50%;             }           #content {                *position:relative;  //相容IE7及以下版本               *top:-50%;             }

子p垂直置中

1、根據子p具體大小設定位移

如果子p固定大小，設定水平和垂直位移父元素的50%，再根據實際長度將子項目向上和向左挪回一半大小

<!--html代碼-->    <p id="outer">        <p id="middle">            子p(固定大小)垂直置中           </p>    </p>/*css代碼*/           #outer{                   background-color: #13CDF4;                   width: 300px;                   height: 200px;                   position: relative;           }           #middle{                    background-color: #E41627;                   width: 100px;                   height: 100px;                   margin: auto;                   position: absolute;                   left: 50%;                    top: 50%;                   margin-left: -50px;                   margin-top: -50px;           }

該方法相容IE7、IE6，但是只針對子p大小的固定的情況下才有效。大部分時候，子p的大小是不固定的，下面介紹子p大小不固定時的方法。由於顯示效果與這個效果基本一樣，就不一一貼出來，讀者可以自行複製代碼驗證。

2、利用translate

針對第一種方法中水平和垂直位移父元素的50%後，不設定margin值，而是利用除css3中的transform屬性設定translate的值，css代碼部分改成如下：

#middle{            background-color: #E41627;           width: 100px;           height: 100px;           margin: auto;           position: absolute;           left: 50%;            top: 50%;           transform: translateX(-50%) translateY(-50%);           -webkit-transform: translateX(-50%) translateY(-50%);       }

這種方法需要注意transform是css3中的屬性，使用時注意瀏覽器的相容性，IE9之前的版本不支援。

3、利用絕對布局absolute

<!--html代碼-->    <p id="outer">        <p id="middle">            利用絕對位置實現子p大小不固定垂直置中           </p>    </p>/*css代碼*/           #outer{               background-color: #13CDF4;               width: 300px;               height: 200px;               position: relative;           }           #middle{                background-color: #E41627;               width: 100px;   //子p大小可隨意設定               height: 100px;               margin: auto;               position: absolute;               top: 0;left: 0;right: 0;bottom: 0;           }

該方法不相容IE7、IE6

4、利用vertical-align

<!--html代碼-->    <p id="outer">        <p id="middle">            利用vertical-align屬性實現子p大小不固定垂直置中           </p>    </p>/*css代碼*/           #outer{               background-color: #13CDF4;               width: 300px;               height: 200px;               display: table-cell;                vertical-align: middle;           }           #middle{                background-color: #E41627;               width: 100px;               height: 100px;               margin: 0 auto;           }

這種方法是將p轉變成table-cell顯示，然後通過vertical-align: middle;再設定其子項目垂直置中，這種方法和上面設定父級元素高度固定時多行文本置中的方法一樣，所以這種方法也不能相容IE7、IE6。如果需要相容IE7、IE6，可以參照上面的代碼，上面設定父級元素高度固定時多行文本置中的方法其實就是將最裡面的p垂直置中。這裡我就不重述了。

5、利用display: flex

<!--html代碼-->    <p id="outer">        <p id="middle">            利用display: flex實現子p大小不固定垂直置中           </p>    </p>/*css代碼*/           #outer{               background-color: #13CDF4;               width: 300px;               height: 200px;               display: flex;               justify-content: center;/*實現水平置中*/               align-items:center; /*實現垂直置中*/           }           #middle{                background-color: #E41627;               width: 100px;               height: 100px;           }

這種方法只需要在父級p中加上這三句話就行，但是在IE中相容性不好，IE9及以下IE瀏覽器版本都不支援。

以上是我總結的一些常用到的垂直置中的設計方法，大家可以根據自己的需要選擇合適的設計方式。