块级元素可以设置高度，宽度，行内元素则不能，如果将行内元素变成行内块元素就可以设置宽高了，只需要将 display 属性设置为 inline-block 即可;

​ 1.行内元素水平居中：给行内元素的父级元素设置 text-align: center ;

​ 2.块级元素水平居中：确保块级元素有一个宽度，给行内元素设置 display: block ; 属性，再给该元素设置 margin: 0 auto ;

​ 3.相对与绝对定位水平居中：确保父级元素具有相对定位属性 relative , 需要居中的子级元素具有绝对定位属性 absolute 。再给子级元素设置 left: 50% ; transform: translateX(-50%) ;

​ 4.使用 calc() 函数：看懂第3点方法，这第4点方法显得有些鸡肋了。这是在css3以前常见的方式。缺点很容易看出，宽度和减去的常量不能很好的动态变化；

​ 能够理解上述水平居中，那么水平垂直居中就很容易理解，需要注意的就是如何垂直。

​ 1.块级元素水平垂直居中：给元素的父级元素设置具体高度 line-height 等于 height 高度

​ 2.相对与绝对定位水平垂直居中：再给子级元素设置 left: 50% ; top: 50% ; transform: translate(-50%，-50%) ;

​ 3. 固定定位中 left: 0 ; top: 0 ; right: 0 ; bottom: 0 : 确保元素有一固定宽高，再给元素设置一个 margin: auto ;

​ 4. flex 布局：最常见的一种布局方式，属性自由多变。给元素设置 display: flex ; align-items: center; justify-content: center ;

常见，常用的水平居中，水平垂直居中的方法都在这了。当然还有很多其它的方法，感兴趣话可以去研究研究。