## 行内元素 **行内元素水平居中：** 首先看它的父元素是不是块级元素，如果是，则直接给父元素设置**text-align: center; ** 如果不是，则先将其父元素设置为块级元素，再给父元素设置**text-align: center;** ## 块级元素 **块级元素水平居中(定宽度)：** 1）需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中） 2)  首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的**left:50%**，即让子元素的左上角水平居中； 设置绝对子元素的**margin-left: -元素宽度的一半px;**或者设置**transform: translateX(-50%);** **块级元素水平居中(不宽度)：** 1) 默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center; 2) 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的**left:50%**，即让子元素的左上角水平居中； 利用css3新增属性**transform: translateX(-50%);** **使用flexbox布局实现水平居中（宽度定不定都可以）:** 使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;