一、水平居中。 水平居中还是很好处理的。 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 我不想说了。 三、水平垂直居中。
- 在知道子元素的宽高情况下，肯定是用父元素相对定位，子元素绝对定位，然后通过相互拉扯，或者margin 来解决。 2.大多情况下，我们不知道子元素的宽高，所以可以用transform：translate（50%，50%）来解决。 3.flex 好用到我不想说了。 4.最后一种可能不太会使用，毕竟有太多的兼容性问题。
#父元素 {
height: 100vh;//必须有高度
display: grid;
}
#子元素 {
margin: auto;
}
