如何居中一个元素（终结版）

一、水平居中。
水平居中还是很好处理的。
1.行内元素。直接使用text-align: center （注意只能用于行内元素）
2.那么块级元素如何水平居中呢，转换一下 给它一个 display: inline-block; 不就好了。
3.我们可以通过 margin: 0 auto; 来居中块级元素，但是，我要强调的是这个只对元素有固定宽度有效。
3.那么块级元素，希望宽度自适应的时候怎么居中呢，转换一下、display: table; 将它变成表格模式就好了，然后你依然可以用 margin: 0 auto; 来居中。
4.用点定位这种看起来高级脸的方式来居中吧、给父元素相对定位，给子元素绝对定位，然后用

left:50%;
transform:translateX(-50%);

和 来做相对拉扯。
5.用flex 布局，非常好用，我就不说了。
二、垂直居中
1.行内元素。直接使用line-height: 120px; （注意只能用于行内元素）。
2.利用表布局的vertical-align: middle可以实现子元素的垂直居中，将父元素display:table;子元素display: table-cell;
vertical-align: middle; 就可以实现
3.用点定位这种看起来高级脸的方式来居中吧、给父元素相对定位，给子元素绝对定位，然后用

top:50%;
transform:translateX(-50%);

这个方法好在不用知道子元素的宽高。
4.flex 我不想说了。
三、水平垂直居中。

1. 在知道子元素的宽高情况下，肯定是用父元素相对定位，子元素绝对定位，然后通过相互拉扯，或者margin 来解决。
   2.大多情况下，我们不知道子元素的宽高，所以可以用transform：translate（50%，50%）来解决。
   3.flex 好用到我不想说了。
   4.最后一种可能不太会使用，毕竟有太多的兼容性问题。

#父元素 {
      height: 100vh;//必须有高度
      display: grid;
    }
  #子元素 {
      margin: auto;
    }