CSS - 居中显示

1.水平居中

• 行内元素居中（例如span,a）

  • 只需使用text-align:center;即可
  • 或使用display:block;，将其转换为块级元素

• 块级元素

  • 块级元素水平居中的最有效方式就是把
    margin-left、margin-right设置为auto:

    margin-left:auto;
    margin-right:auto;
    

    还有一种懒人方法:

    margin:0 auto;
    

    (这里的'0'可以换成你的值)

• 绝对定位

  • 直接用下面的代码

    left: 50%;//从左往右50%
    transform: translate(-50%, 0);//因为在中心的点是左上角的点，所以往回调本身的50%
    

2.垂直居中

因为垂直居中理解较难，所以常用这个（绝对定位）

  top: 50%;
  transform: translate(0, -50%);

3.水平和垂直都居中

最常用的是这个（绝对定位）

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

疑难解答

• 为什么绝对定位不起作用？
  • 因为你的position元素不是absolute或fixed