前端垂直居中的几种简单实现

,

在前端开发尤其是web开发中会经常调整元素位置，所以经常会遇到居中问题，对于水平居中我们都知道用简单的text-align:center;就可以实现，但是对于垂直居中却并不是那么简单实现的，往往需要多条代码合作才能实现其效果。

本文简单介绍几种垂直居中的方式，技术不高，水平有限，仅供参考。

1. 不知道自己高度和父元素高度时，只要使用绝对定位就可以实现

以下代码没有插图的都是实现的效果相同，如图所示：
alignCenter

当一个父元素没有明确限制高度，而只是靠着内部元素的高度撑起来其高度时，我们又要在该父元素中设置一个居中的框框就可以采取这种方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// html代码
<div class="parent-element-absolute">
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    enter <br>
    <div class="child-element-absolute"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// css代码
.parent-element-absolute {
    width: 800px;
    text-align: left;
    background-color: white;

    position: relative;
}
.child-element-absolute {
    width: 450px;
    height: 100px;
    background-color: gray;

    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

2. 在父元素下只有一个元素，且父元素设置了高度，则只需要使用相对定位即可

该必须条件为该父元素下只有一个子元素。其html代码与上类似。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// css
.parent-element-relative {
    width: 800px;
    height: 250px;
    text-align: left;
    background-color: white;

    position: relative;
}

.child-element-relative {
    width: 450px;
    height: 100px;
    background-color: gray;

    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

3. flex布局设置垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent-element-flex {
    width: 800px;
    height: 250px;
    background-color: white;

    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.child-element-flex {
    width: 450px;
    height: 100px;
    background-color: gray;

    margin: 0 auto;
}

4. table-cell设置垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent-element-table-cell {
    width: 800px;
    height: 250px;
    background-color: white;

    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.child-element-table-cell {
    width: 450px;
    height: 100px;
    background-color: gray;

    margin: 0 auto;
}

5. -webkit-box属性设置垂直居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.parent-element-webkit-box{
    width: 800px;
    height: 250px;
    background-color: white;

    display: -webkit-box;
    -webkit-webkit-box-pack: enter;
    -moz-webkit-box-pack: enter;
    -ms-webkit-box-pack: enter;
    -o-webkit-box-pack: enter;
    -khtml-webkit-box-pack: enter;
    webkit-box-pack: enter;
    -webkit-box-align: center;
}
.child-element-webkit-box{
    width: 450px;
    height: 100px;
    background-color: gray;

    margin:0 auto;
}

6. line-height实现文字居中

1
2
3
4
//html
<div class="parent-element-line-height">
    andy
</div>
1
2
3
4
5
6
7
8
9
10
//css
.parent-element-line-height {
    width: 800px;
    height: 250px;
    background-color: white;

    line-height: 250px;
    text-align: center;
    vertical-align: middle;
}

7. fixed设置窗口整体居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parent-element-fixed{
    width: 600px;
    height: 250px;
    background-color: lightgrey;

    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    line-height: 250px;
    vertical-align: middle;
}