css垂直居中的幾種方式

2021-07-09 16:50:10 字數 1085 閱讀 8947

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line-height 高度一致來實現的。

html**：

class="container">


hi,imooc!


div>
css**：



.container


style>
說到豎直居中，css 中有乙個用於豎直居中的屬性 vertical-align，但這個樣式只有在父元素為 td 或 th 時，才會生效。所以又要插入 table 標籤了。

因為 td 標籤預設情況下就預設設定了 vertical-align 為 middle，所以我們不需要顯式地設定。

html**：



class="wrap">


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


div>


td>


tr>


tbody>


table>


body>
css**：

table


td
在 chrome、firefox 及 ie8 以上的瀏覽器下可以設定塊級元素的 display 為 table-cell，啟用 vertical-align 屬性，但注意 ie6、7 並不支援這個樣式。

這種方法的好處是不用新增多餘的無意義的標籤，但缺點也很明顯，它的相容性不是很好，不相容 ie6、7。

html**：

class="container">


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


看我是否可以居中。p>


div>


div>
css**：



.container


style>

css垂直居中的幾種方式

1.對於可以一行處理的 設定 height apx line height apx 2.對於一段文字 會多行顯示的 2.1如果是可以設定乙個固定高度的 父元素使用display table height apx 子元素使用 display table cell vertical align midd...

CSS 元素垂直居中的幾種方式

目錄 1.vertical align line height 2.flex 常用 3.display absolute transform 4.margin auto display flex margin auto display absolute margin auto 5.table cel...

幾種CSS實現元素垂直居中的方式

最近在專案中又用到了元素的垂直居中，在這裡整理總結一下可以實現元素垂直居中的幾種方法。方法1 利用line height實現單行元素的垂直居中。實現方法 將行內文字的line height設定為父級元素的高度 文字垂直居中 方法2 父級設定display table，子元素 display tabl...