垂直居中的几种方法

发表于

绝对定位与margin-top(负外边距）

绝对定位与transform

[tranlate(50%,-50%)](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/translate())

使用绝对定位结合margin：auto

1. 垂直居中的元素相对于父元素绝对定位 2. top和bottom相等 3. margin：auto

对父元素使用padding

  • 父元素不设置height

  • 父元素padding设置为子元素的height

使用flex布局

flex布局经典教程

1
2
3
display:flex;
text-align:center;
align-items:center;