在实际开发中经常遇到使用positon:absolute配和margin:auto进行居中定位。具体代码如下
// css 代码
.parent2 {
position: relative;
margin-top: 100px;
width: 300px;
height: 300px;
background-color: red;
}
.parent2 > .child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: green;
}
// html 代码
<div class="parent2">
<span class="child">margin: auto</span>
</div>
实际的效果如下
我们只设置了child的width/height/margin它为什么就会是实现自动居中的效果呢？
格式化宽高及流体特性
其实原因还是咋们的position: absolute在作怪。当给元素添加绝对定位后，它就会表现为块级元素的特点。（这时获取display就会是block或table）。当我们知道它变为块级元素了就很好说明问题。
块级元素的流体特性
如div这样的块级元素我们设定了固定width然后在设置margin: 0 auto会自动居中这在我们日常开发中很常见也很好理解。因为它本身具有流动性，会自动填满当前的容器。当我们固定了宽度后设置margin那么由于流体特性它会在元素两侧自动填满内容，所以最终的效果就是水平居中了。这也就解释了上面span元素水平居中的表现。
格式化宽高
当我们给绝对定位元素设定了相对方向属性时（如：top和bottom、left和right），那么在对应的方向上就会形成格式化宽高。类似于在元素的外部加了一圈无形的包裹，那么再加上当前元素表现出块级元素的特点。配合margin:auto在水平方向就居中了。但为什么垂直方向也会居中呢？按照平常的块级元素垂直方向应该是无效的，这里就是格式化高度在起作用，它会让元素的高度也表现出流体特性。那么margin也会自动填充上下空间了，到这里就实现了水平和垂直的自动居中定位。
总结
之前一直在开发中使用相关样式，来快速实行布局定位。但一直不知道这是为什么，直到最近看了本书才发现豁然开朗。所以写出来和大家分享一下，写的一般请大家见谅啊！
