web开发

CSS实现垂直水平居中

作者：阿呆  发表于:

水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，但有各种hack的方式可以实现，各有优缺点，兼容性也各有不同，这里举例几种常见的实现方式。

1、绝对定位居中（子元素需设置宽高）

内容块的父容器：position:relative;
子元素：position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto; （必须设置高度）

原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。

2、绝对定位配合margin（子元素需设置宽高）

原理：top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；

第一种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
       .one{
           border: 1px solid red;
           width: 200px;height: 200px;
           position: relative;
       }
       .two{
           background: red;
           width: 100px;height: 100px
           position: absolute;left: 50%;top:50%;
           margin: -50px 0 0 -50px;          
          （margin设置百分比是相当于自身的高度与宽度）
       }
   </style>
   <div class="one">
       <div class="two"></div>
   </div>

第二种

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        position: relative;
    }
    .two{
        position:absolute;
        top:50%;
        left:0;
        right:0;
        margin:auto;
        margin-top:-100px;
        （margin设置百分比是相当于自身的高度与宽度）
        width:200px;
        height:200px;
        background: red;
    }
</style>
<body>
<div class="one">
    <div class="two"></div>
</div>

3、table-cell方式（子元素不需设置宽高）

父容器：display:table-cell;text-align:center;vertical-align:middle;（设置宽高）
子元素：display:inline-block;vertical-align:middle;

原理：利用表格布局的特点，vertical-align设置为middle;单元格中的内容与所在行中间对齐

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        display:table-cell;vertical-align:middle;text-align: center;
    }
    .two{
        background: red;
        (1)display:inline-block;(用此方法向上偏差2px)
        (2)margin:auto（垂直水平居中）
    }
</style>
<div class="one">
    <div class="two">11111111111</div>
</div>

4、通过添加空span标签使图片居中（子元素需设置宽高）

父容器：text-align: center;

<span>
display: inline-block; 将行内元素改变为行内块元素显示
width: 1px; 实现ＩＥ下可读效果
height: 100%; 使用元素高度和图片容器高度一样
vertical-align: middle; 垂直对齐
图片：vertical-align: middle; 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        text-align: center;
    }
    span{
        display: inline-block;
        width: 1px;
        height: 100%;
        vertical-align: middle;
    }
</style>
<div class="one">
    <span></span>
    <img src="../img/jian.png" alt="">
</div>

5、外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;（子元素需设置宽高）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 30px;
        height: 20px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -35px; /* (width + padding)/2 */
        margin-top: -30px; /* (height + padding)/2 */
    }
</style>
<div class="one">
    <span></span>
    <div class="two"></div>
</div>

6、内容定义transform:translate(-50%,-50%),并且加上top：50%；left：50%。（子元素需设置宽高）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
        position: relative;
    }
    .two{
        background: red;
        width: 50%;
        height: 30%;
        margin: auto;
        position: absolute;
        top: 50%; left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>
<div class="one">
    <span></span>
    <div class="two"></div>
</div>

7、增加额外子元素设置margin-bottom为内容元素的高度+padding的一半。（不能实现水平垂直居中，仅垂直居中）

原理与2方法类似，floater的下边界是包含框的中心线，负下外边界保证center的中心线与包含框中心线重合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .one{
        border: 1px solid red;
        width: 200px;height: 200px;
    }
    .floater{
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom: -10%;
    }
    .two{
        clear: both;
        height: 20%;
        background: red;
    }
</style>
<div class="one">
    <div class="floater"></div>
    <div class="two"></div>
</div>

8、inline-block方式（子元素不需设置宽高）

原理：为同一行的inline-block元素设置vertical-align：middle，该行内的inline-block元素会按照元素的垂直中心线对齐。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
    .one{
        border: 1px solid red;
        width: 300px;height: 300px;
        text-align: center;
    }
    .one:after{
        content: '';
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    .two{
        background: red;
        display:inline-block;
        vertical-align:middle;
    }
</style>
<div class="one">
    <div class="two">11111111111111111111</div>
</div>

9、弹性盒式布局（子元素不需设置宽高）

CSS弹性盒

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
   (1) .one{
           border: 1px solid red;
           width: 300px;height: 300px;
           display: flex;
           align-items: center;
           justify-content: center;
       }
       .two{
           background: red;
       }
   (2) .one{
           border: 1px solid red;
           width: 300px;height: 300px;
           display: flex;
       }
       .two{
           background: red;
           margin:auto;
       }
   </style>
   <div class="one">
       <div class="two">111111111111</div>
   </div>
分享到