水平居中

方式一：inline-block + text-align

#1.设置居中对象为“行内块”
display: inline-block;

#2.设置居中对象的父级容器文本居中
text-align: center;

#缺点：居中对象内容也会受到父级容器影响,文本内容将被居中，并不好

方式二：margin

//只需要给居中对象设置如下值
display: table 或 block;
margin: 0px auto;

方式三：absolute + transform

// 设置父级对象定位类型
position: relative; // 开启父级定位
// 设置居中 对象
position: absolute; // 绝对定位
left: 50%; // 左侧占50%
transform: translateX(-50%); // 向左移动居中对象的一半

方式四：相对定位relative;

position: relative;
left: 50%; // 相对于原来的位置
transform: ftranslateX(-50%)