CSS 设置垂直居中

目录

一、设置文字垂直居中

1、line-height 使文字垂直居中

2、flex布局 使文字垂直居中

3、使用display和vertical-align 使文字垂直居中

二、设置块状元素垂直居中

1、使用绝对定位和transform 使块状元素垂直居中(未知块状元素高度)

2、使用flex布局 使块状元素垂直居中(未知块状元素高度)

3、使用绝对定位和margin 使块状元素垂直居中(已知块状元素高度)

4、使用padding 使块状元素垂直居中(已知元素高度)

5、使用grid布局 使块状元素垂直居中(未知元素高度)

6、使用伪元素:before 使块状元素垂直居中(未知元素高度)

一、设置文字垂直居中

1、line-height 使文字垂直居中




2、flex布局 使文字垂直居中

 
 
 

3、使用display和vertical-align 使文字垂直居中

3.1 display: table和vertical-align: middle



3.2 display: table-cell和vertical-align: middle 



二、设置块状元素垂直居中

1、使用绝对定位和transform 使块状元素垂直居中(未知块状元素高度)



2、使用flex布局 使块状元素垂直居中(未知块状元素高度)

2.1 display: flex和align-items: center



2.2 display: flex和align-self: center



3、使用绝对定位和margin 使块状元素垂直居中(已知块状元素高度)

3.1 绝对定位和margin: auto



3.2 绝对定位和margin-top



4、使用padding 使块状元素垂直居中(已知元素高度)



5、使用grid布局 使块状元素垂直居中(未知元素高度)



6、使用伪元素:before 使块状元素垂直居中(未知元素高度)



你可能感兴趣的:(css,css,前端,html)