-
绝对定位单元的中间实现
如果你问CSS是如何实现绝对定位元素的中间效应的，那么很多人都有答案。
兼容性好的主流用法是：
CSS代码将内容复制到剪贴板。
{。元
宽度：600px；身高：400px；
位置：绝对；左：50%；顶端：50%；
边距：- 200px； / *一半高度
margin-left:随着改变； / *半宽度
}
然而，这种方法存在着明显的不足，即需要事先知道元素的大小，否则，边际值的负值调整不准确，此时经常借助JS获取。
随着CSS3的崛起，一个更好的解决办法是使用而不是边缘变换。变换。翻译偏移的百分比与自身的大小有关，所以我们可以：
CSS代码将内容复制到剪贴板。
{。元
宽度：600px；身高：400px；
位置：绝对；左：50%；顶端：50%；
转换：翻译（- 50%，- 50%）；50%的一半大小
}
因此，不管绝对定位元素的大小，它垂直显示。
然而，问题是明显的，而且兼容性不好。IE10 +和其他现代浏览器都支持它。忽略了IE8浏览器盛行于中国有点不太适合（移动Web的发展可以忽略）。
事实上，实现绝对定位元素的中位数位置还有另一种方法。可以说，这是一个权衡上述维度适应性和兼容性的计划。其实现的核心是保证金：自动…
边缘：自动实现绝对定位元素的中心。
首先，让我们看看CSS代码：
CSS代码将内容复制到剪贴板。
{。元
宽度：600px；身高：400px；
位置：绝对的；左：0；最高：0；错误：0；bottombottom：0；
边界：自动的；自动的居中的。
}
代码的两个要点：
0个位置分别上下。
保证金：汽车
因此，它在中间，宽度：600px高度：上述代码400px仅仅是暗示。你把它修改成其他大小，或者不设置大小（你需要是一个图片，它包含自己的尺寸元素），所有的都显示在中间。很有意思~
你可以点击这里硬：保证金：自动与绝对定位元素在垂直演示