一、设置文字垂直居中
1、line-height 使文字垂直居中
line-height 使文字垂直居中
2、flex布局 使文字垂直居中
flex布局 使文字垂直居中
3、使用display和vertical-align 使文字垂直居中
3.1 display: table和vertical-align: middle
使用display和vertical-align 使文字垂直居中
使用display和vertical-align 使文字垂直居中
3.2 display: table-cell和vertical-align: middle
使用display和vertical-align 使文字垂直居中
使用display和vertical-align 使文字垂直居中
二、设置块状元素垂直居中
1、使用绝对定位和transform 使块状元素垂直居中(未知块状元素高度)
使用绝对定位和transform 使块状元素垂直居中
使用绝对定位和transform 使块状元素垂直居中
2、使用flex布局 使块状元素垂直居中(未知块状元素高度)
2.1 display: flex和align-items: center
使用flex布局 使块状元素垂直居中
使用flex布局 使块状元素垂直居中
2.2 display: flex和align-self: center
使用flex布局 使块状元素垂直居中
使用flex布局 使块状元素垂直居中
3、使用绝对定位和margin 使块状元素垂直居中(已知块状元素高度)
3.1 绝对定位和margin: auto
使用绝对定位和margin 使块状元素垂直居中
使用绝对定位和margin 使块状元素垂直居中
3.2 绝对定位和margin-top
使用绝对定位和margin 使块状元素垂直居中
使用绝对定位和margin 使块状元素垂直居中
4、使用padding 使块状元素垂直居中(已知元素高度)
使用padding 使块状元素垂直居中
使用padding 使块状元素垂直居中
5、使用grid布局 使块状元素垂直居中(未知元素高度)
使用grid布局 使块状元素垂直居中
使用grid布局 使块状元素垂直居中
6、使用伪元素:before 使块状元素垂直居中(未知元素高度)
使用伪元素:before 使块状元素垂直居中
使用伪元素:before 使块状元素垂直居中