css实现居中的常用方法

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

在前端开发中，让元素居中是常常用到的。其中，居中可以分为水平和垂直居中两种。

水平居中

1、margin：0 auto

代码如下：

1
2
3
4
5
6
7
.content{
    width: 100px;
    height: 100px;
    background: #f14b11;
    margin: 0 auto;
}
<div class="content"></div>

效果图：

水平垂直居中

1、position

利用position实现水平垂直居中，父元素相对定位，子元素绝对定位。子元素距离左与上各-50%，margin减去自身宽度的一半。适用于具有固定宽和高的元素居中
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent{
    position: relative;
    width: 300px;
    height: 300px;
    background: yellow;
    margin: auto;
}
.son{
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
    left: 50%;
    top: 50%;
    margin: -50px -50px;
}

<div class="parent">
    <div class="son"></div>
</div>

效果图：

2、position and transform

利用position和transform使元素居中。将子元素的margin替换成transform：translate（-50%，-50%）。使用于不知道具体宽和高的元素居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent{
    position: relative;
    width: 300px;
    height: 300px;
    background: red;
    margin: auto;
}
.son{
    width: 100px;
    height: 100px;
    position: absolute;
    background: yellow;
    left: 50%;
    top: 50%;
    /*margin: -50px -50px;*/
    transform: translate(-50%,-50%);
}
        
<div class="parent">
    <div class="son"></div>
</div>

效果图：
!]

3、flex

利用弹性布局使元素居中。给父元素设置
display:flex;//设置父元素
justify-content:center;//水平居中
align-items:center;//垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.parent{
    position: relative;
     width: 300px;
     height: 300px;
     background: red;
     margin: auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .son{
     width: 100px;
     height: 100px;
     background: yellow;
 }
 
 <div class="parent">
     <div class="son"></div>
 </div>

效果图：

4、table-cell

组合使用display:table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中。适用于不知道元素具体宽和高是。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent{
    position: relative;
     width: 300px;
     height: 300px;
     background: red;
     margin: auto;
     display: table-cell;
     vertical-align: middle;
     text-align: center;
     border:1px solid #666;
 }
 .son{
     color: yellow;
 }
 
 <div class="parent">
     <div class="son">我爱你中国</div>
 </div>

效果图：

table-cell的应用还有很多，具体的参考张鑫旭老师的《display:table-cell的应用》。

5、vertical-align:middle

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
32
33
34
.parent{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
    width: 300px;
    height: 300px;
}
.parent:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.son{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 14px;
    white-space: normal;
}

<div class="parent">
    <div class="son"></div>
</div>

效果图：