方法一：

設(shè)置父元素高度，設(shè)置子元素行高垂直居中

<style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width: 200px;height:200px;margin: 10px;border:1px solid blue; line-height: 200px;} span{display: inline-block;vertical-align: middle;line-height: 22px;} </style> <div> <span>測試文字測試文字</span> </div> <div> <span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span> </div>

關(guān)鍵樣式：

① 父元素（這里是div）設(shè)置和高度一致的 line-height （這里是200px）--- 由后面的vertical-align定義看，這是為了設(shè)置div的基線

② 子元素 (這里是span) 設(shè)置合適的line-height，并設(shè)置display:inline-block、vertical-align: middle;? --- inline水平的元素無法設(shè)置line-height。所以這里要設(shè)置inline-block。

?

重新審視一下 CSS vertical-align 屬性 的定義：

該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。

由以上需要注意 ：

① vertical-align屬性應(yīng)該設(shè)置到 行內(nèi)元素上（行內(nèi)塊元素也可）

② 如果文字的總高度超出了 容器（這里是div）的高度，那么垂直居中會失效。

③ ie7以下 span結(jié)束標簽和內(nèi)部內(nèi)容不能有間隔空白，也就是說span的結(jié)束標簽和內(nèi)部內(nèi)容要連在一起。

?缺點：必須設(shè)置父元素高度

方法二：

利用display:table-cell。

<style> *{padding: 0;margin:0;font-size: 12px;} div{display: table-cell;width: 200px;border:1px solid blue;vertical-align: middle;} </style> <div> <span>測試文字測試文字</span> </div> <div> 測試文字測試文字 </div> <div> <span>測試文字 <br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字<br/> 測試文字</span> </div>

優(yōu)點：等高布局，無需設(shè)置高度，文字輕松實現(xiàn)垂直居中

缺點：ie7以下不兼容！

?

轉(zhuǎn)載于:https://www.cnblogs.com/luoluo8/p/5802133.html

總結(jié)

以上是生活随笔為你收集整理的父元素 高度固定，如何使其中的文字垂直居中？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。