css垂直居中的幾種方式

2022-07-17 08:48:09 字數 506 閱讀 5087

1. 對於可以一行處理的 設定 height:apx; line-height:apx;

2.對於一段文字(會多行顯示的)

->2.1如果是可以設定乙個固定高度的

父元素使用display:table; height: apx;  子元素使用 display:table-cell; vertical-align:middle;

note: vertical-align屬性只對部分html元素有效 具體是擁有valign特性的(x)html標籤

比如基本上 對於inline-block顯示的元素(內聯元素)有效

->2.2如果是乙個高度不固定的

設定上下 一樣的內補 padding-top:apx; padding-bottom:apx;

->2.3 使用csshack支援ie6 垂直居中 綜合考慮 table-cell方案 多層巢狀

div#wrap

div#subwrap

div#content

參考:

css垂直居中的幾種方式

父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html class container hi,imooc div css container style 說到豎直居中,css 中有乙個用於豎直居中的屬性 vertical al...

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...