绝对定位元素的水平垂直居中

几种常见的元素css absolute position

居中绝对定位元素

margin负值

.box {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    /* 高度的一半 */
    margin-top: -200px;
    /* 宽度的一半 */
    margin-left: -200px;
}

优点:兼容性不错
缺点:需要知道元素的宽高,在实际开发中,一般需要使用JS获得,然后去设置margin负值。

CSS中transform

CSS中transform属性允许你修改CSS可视化模型的坐标空间。通过transform,可以让元素进行移动(translate)、旋转(rotate)、缩放(scale)、倾斜(skew)。
transformtranslate就是基于X和Y坐标重新定位元素,偏移的百分比值是相对于自身大小。

.box {
    width: 400px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    /* 自身宽高的一半 */
    transform: translate(-50%, -50%);
}

优点:可能易于理解吧...
缺点:兼容性不好。

IE9(-ms-), IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的(手机web开发可忽略)。

margin:auto

.box {
    width: 400px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

优点:兼容性好,而且在某些margin: 0 auto失效的情况下也可以用此方法完成水平居中。
缺点:暂无,估计此方法一出,就是标准答案了。

margin: auto 为什么会让绝对定位元素居中?

此部分转载自:http://www.zhangxinxu.com/wordpress/?p=3794

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

<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的填充规则和普通流体元素一模一样:

  • 如果一侧定值,一侧autoauto为剩余空间大小;
  • 如果两侧均是auto, 则平分剩余空间;
.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正好把上下左右剩余空间全部等分了,自然就居中啦!

Show Comments