Horizontal and vertical centering of absolutely positioned elements

Second, the centering implementation of absolute positioning elements

If you want to ask how CSS can achieve the centering effect of absolutely positioned elements, many people already have the answer in mind.

The mainstream usage with good compatibility is:

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px; /* half the height */
    margin-left: -300px; /* half the width */
}

However, this method has an obvious disadvantage, that is, the size of the element needs to be known in advance. Otherwise margin, the adjustment of negative values will not be accurate. At this point, it is often obtained with the help of JS.

With the rise of CSS3, a better solution is to use transforminstead margin. The percentage value transformof the translateoffset is relative to its own size, so we can:

.element {
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); /* 50% is half of its own size*/
}

Therefore, no matter what the size of the absolutely positioned element is, it is displayed horizontally and vertically centered.

Of course, the problem is obvious, the compatibility is not good.~~IE10+ and other modern browsers only support~~, IE9(-ms-), IE10+ and other modern browsers only support. It is somewhat inappropriate for the popular IE8 browser in China to be ignored (negligible for mobile web development).

In fact, there is another way to implement the centering of absolutely positioned elements, which can be said to be a solution that weighs the above size adaptation and compatibility. The core of its implementation is margin:auto.

Third, margin:auto realizes the centering of absolutely positioned elements

First, let's look at the CSS code:

.element {
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto; /* With this, it is automatically centered */
}

Two key points of the code:

上下左右均0位置定位；
margin: auto

于是，就居中了。上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。很有意思的~~

您可以狠狠地点击这里：margin:auto与绝对定位元素的垂直居中demo

点击demo中间的按钮

点击demo页面中间的按钮，让原本static的框框absolute化，可以发现其是水平垂直居中的。

不知诸位新技能get否？

对了，该方法IE8+以及其他浏览器都是OK的。

8-10月份浏览器的使用比例

上图为8~10月份，百度流量统计员给出的浏览器访问数据。IE6+IE7大概14%的样子。显然，很快，此方法就要开始称霸PC武林了！

三、悠悠哉哉再说点什么

可能有人会问，为何margin: auto;会让绝对定位元素居中了呢？哈哈，原因是………………
.
.
.
.
我也不知道！

可能需要查询规范寻找一些线索。但，待会儿我还有篮球比赛，恕我没有足够精力去深入。欢迎有相关研究的达人分享其内部机制原理，不甚感谢！

更新于2017年2月18日
今天正好有看到自己的这篇文章，我更新下原因吧！

当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性就发生了，例如：

<div class="box"></div>

.box {
  position: absolute;
  left: 0; right: 0;
}

如果只有left属性或者只有right属性，则由于包裹性此时.box宽度是0。但是，在本例中，因为left/right同时存在，因此宽度就不是0，而是自适应于.box包含块的padding box宽度，也就是随着包含块padding box的宽度变化，.box的宽度也会跟着一起变。

具有流体特性绝对定位元素的margin:auto的填充规则和普通流体元素一模一样：

如果一侧定值，一侧auto，auto为剩余空间大小；
如果两侧均是auto, 则平分剩余空间；

：

例如，下面的CSS代码：

.father {
    width: 300px; height:150px;
    position: relative;
}
.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
}

此时.son这个元素的尺寸表现为“格式化宽度和格式化高度”，和<div>的“正常流宽度”一样，同属于外部尺寸，也就是尺寸自动填充父级元素的可用尺寸的，然后，此时我们给.son设置尺寸，例如：

.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
}

此时宽高被限制，原本应该填充的空间就被多余了出来，这多余的空间就是margin:auto计算的空间，因此，如果这时候，我们再设置一个margin:auto，那么：

.son { 
    position: absolute; 
    top: 0; right: 0; bottom: 0; left: 0;
    width: 200px; height: 100px;
    margin: auto;
}

我们这个.son元素就水平和垂直方向同时居中了。因为，auto正好把上下左右剩余空间全部等分了，自然就居中啦！

转载：小tip: margin:auto实现绝对定位元素的水平垂直居中

总结：

div {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0
    bottom: 0;
    width: 100px;
    height: 100px;
}

绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。

没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。

IE7- 的渲染方式不同，渲染规则也不一样，他不会让定位元素去自适应。

装载：https://www.barretlee.com/blog/2014/08/07/position-and-margin/