绝对居中问题

1. 负外边距 在线示例

基本思路：将设置了绝对定位的子元素水平和垂直偏移50%，然后在水平和垂直方向分别偏移负自身宽高的一半，示意图如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- html -->
<div id="parent">
    <div id="son">
        <div id="cont"></div>
    </div>
</div>
<!-- css -->
<style>
#parent{
    width: 500px;
    height: 300px;
    position: relative;
    background-color: rgb(46,95,62);
}

#son{
    width: 250px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
}

#cont{
    width: 100%;
    height: 150px;
    margin-left: -50%;
    margin-top: -75px;
    background-color: rgb(23,48,31);
}
</style>
  • 优点：兼容性好，代码量少
  • 不足：子元素的宽高需要确定，对于高度自适应的容器会带来问题，建议把盒子设置成box-sizing:border-box

2. 负位移 在线示例

基本思路：将设置了绝对定位的子元素水平和垂直偏移50%，然后用transforms属性值将子元素偏移负自身宽高的一半

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- html -->
<div id="parent">
    <div id="son"></div>
</div>
<!-- css -->
<style>
    #parent{
        width: 500px;
        height: 300px;
        position: relative;
        background-color: rgb(46,95,62);
    }

    #son{
        width: 250px;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        background-color: rgb(23,48,31);
    }
</style>
  • 优点：支持子容器高度自适应；适用于响应式布局环境；移动浏览器支持较好；代码量少
  • 不足：不支持IE8及以西啊浏览器；需要添加浏览器私有前缀；translate可能受transform其他子属性值的影响

3. 表格块 在线示例

基本思路：通过display中的table和table-cell属性，模拟表格布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!-- html -->
<div id="parent">
    <div id="son">
        <div id="cont"></div>
    </div>
</div>
<!-- css -->
<style>
    #parent{
        width: 500px;
        height: 300px;
        display: table;
        background-color: rgb(46,95,62);
    }

    #son{
        display: table-cell;
        vertical-align: middle;
    }

    #cont{
        width: 50%;
        height: 50%;
        margin: auto;
        background-color: rgb(23,48,31);
    }
</style>
  • 优点：支持高度自适应；可适应响应式环境；适用于多个子元素水平垂直居中环境；兼容性好；
  • 不足：需要额外标签

4. 行内块 在线示例

基本思路：将子容器和任一伪元素设置为行内块及水平居中，然后对父容器文本居中，示意图如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!-- html -->
<div id="parent">
    <div id="son"></div>
</div>
<!-- css -->
<style>
#parent{
    width: 500px;
    height: 250px;
    text-align: center;
    overflow: auto;
    background-color: rgb(46,95,62);
}

#parent:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

#son{
    width: 250px;
    height: 150px;
    display: inline-block;
    vertical-align: middle;
    background-color: rgb(23,48,31);
}
</style>
  • 优点：支持子元素高度自适应；适应于多个子元素水平垂直居中环境；兼容性良好，IE7及以上支持
  • 不足：当存在多个子容器时，注意盒子之间的间隙

5. 伸缩盒模型 在线示例

基本思路：使用flexbox弹性盒模型设置居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="parent">
    <div id="son"></div>
</div>

<style>
    #parent{
        width: 500px;
        height: 300px;
        background-color: rgb(46,95,62);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #son{
        width: 250px;
        height: 150px;
        background-color: rgb(23,48,31);
    }
</style>
  • 优点：不需要设置子元素的宽高；适用于任意子元素水平垂直居中环境；
  • 不足：IE10及以上兼容，高级浏览器也部分存在兼容问题；需要添加浏览器私有前缀；可能存在性能问题。

6. 绝对居中块 在线示例

基本思路：设置子元素外边距auto及四个方向的偏移值为0做到水平垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- html -->
<div id="parent">
    <div id="son"></div>
</div>
<!-- css -->
<style>
    #parent{
        width: 500px;
        height: 300px;
        background-color: rgb(46,95,62);
        position: absolute;
    }

    #son{
        width: 40%;
        height: 40%;
        background-color: rgb(23,48,31);
        margin: auto;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;  
    }
</style>
  • 优点：支持IE8及以上；代码量少，便签结构简单；通过用%设置宽高值实现适用于响应式环境的目的
  • 不足：高度必须定义