CSS 元素居中布局的几种方案

水平方向的居中

  • 行内级元素
1
text-align: center;
  • 块级元素
1
margin: 0 auto;
  • 绝对定位
1
2
3
left: 0;
right: 0;
margin: 0 auto;
  • Flex 布局
1
justify-content: center;

垂直方向的居中

  • 块级元素
1
margin: auto 0;
  • 绝对定位
1
2
3
top: 0;
bottom: 0;
margin: auto 0;
  • Flex 布局
1
align-items: center;
  • 位移
1
2
top: 50%;
transform: translate(0, -50%);