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

2021-10-19 18:21:47 字數 777 閱讀 4170

目錄

1.vertical-align + line-height

2.flex（常用）

3.display:absolute + transform

4.margin:auto

display:flex + margin:auto

display:absolute + margin:auto

5.table-cell
vertical-align對行內元素起作用，起初是用於文字的，但是inline-block也具有行內元素的特性。設定行高後，使用vertical-align: middle使元素居中
flex布局是常用的垂直居中方式，justify-content設定子元素在主軸上的位置居中，align-items控制這條主軸的位置居中。（注：flex-direction控制主軸方向（預設水平））
使用絕對定位，相對父元素居中。使用transform使子元素根據自身寬高相對於元素左上角位移

需要了解margin:auto的原理。
根據剩餘空間自動計算margin。所以把top,right,bottom,left都設定為0。

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

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

css垂直居中的幾種方式

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

css垂直居中的幾種方式

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