小程序實現(xiàn)文字上下居中的辦法

小程序實現(xiàn)文本上下居中，也就是使用父元素高度確定的單行文本的豎直居中的方法來實現(xiàn)，這也是最為基本的方法。

　　父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

　　方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。

　　css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。下面看一下例子：

　　html代碼：

　　1

　　2

　　3

　　4

　　看我是否可以居中。p>

　　5 p>

　　6 tr>table>

　　7 body>

　　css代碼：

　　1 table td{height:500px;background:#ccc}

　　因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。

　　方法二：設置塊級元素的 display 為 table-cell(設置為表格單元顯示)

　　但這種方法兼容性比較差，只是提供大家學習參考。

　　在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell(設置為表格單元顯示)，激活 vertical-align 屬性，

　　但注意 IE6、7 并不支持這個樣式, 兼容性比較差。

　　html

　　1

　　2

　　3

　　看我是否可以居中。p>

　　4

　　看我是否可以居中。p>

　　5

　　看我是否可以居中。p>

　　6 p>

　　7 p>

　　css

　　1

　　這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質。