水平居中
方式一：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%)
网友评论