Fork me on GitHub

Any application that can be written in JavaScript, will eventually be written in JavaScript.

CSS未知宽高元素水平垂直居中

一般前端开发的时候元素的高度和宽度都是已知的，对齐做水平和垂直居中是很容易做到的事情，但是偶然情况下会出现需要让未知高宽度的元素做到水平垂直居中的坑爹需求，比如上传组件中，要使上传的图片居中，但是上传的图片却高宽度不定的情况等。下面我就找了一些方法，亲测有效。

方法一

思路：显示设置父元素为：table，子元素为：table-cell，这样就可以使用 vertical-align: center，实现水平居中

优点：父元素（parent）可以动态的改变高度（table元素的特性）

缺点：IE8以下不支持

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
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>未知宽高元素水平垂直居中</title>
</head>
<style>
  .parent1{
    display: table;
    height:300px;
    width: 300px;
    background-color: #FD0C70;
  }
  .parent1 .child{
    display: table-cell;
    /*子元素使用了table-cell，垂直居中就可以实现*/
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
</style>
<body>
  <div class="parent1">
    <div class="child">hello world-1</div>
  </div>
</body>
</html>

方法二：

思路：使用一个空标签span设置他的 vertical-align 基准线为中间，并且让他为 inline-block，宽度为 0

缺点：多了一个没用的空标签，display:inline-block; 在 IE 6,7是不支持的。当然也可以使用伪元素来代替span标签，不过IE支持也不好。

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>未知宽高元素水平垂直居中</title>
</head>
<style>
  .parent2{
    height:300px;
    width: 300px;
    text-align: center;
    background: #FD0C70;
  }
  .parent2 span{
    display: inline-block;;
    width: 0;
    height: 100%;
    vertical-align: middle;
    /*以下的兼容 ie6，7*/
    zoom: 1;
    *display: inline;
  }
  .parent2 .child{
    display: inline-block;
    color: #fff;
    zoom: 1;
    *display: inline;
  }
</style>
<body>
  <div class="parent1">
    <div class="child">hello world-1</div>
  </div>

  <div class="parent2">
    <span></span>
    <div class="child">hello world-2</div>
  </div>
</body>
</html>

方法三

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)

优点：高大上,可以在webkit内核的浏览器中使用

缺点：不支持IE9以下不支持transform属性

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
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>未知宽高元素水平垂直居中</title>
</head>
<style>
  .parent3{
    position: relative;
    height:300px;
    width: 300px;
    background: #FD0C70;
  }
  .parent3 .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
  }
</style>
<body>
  <div class="parent3">
    <div class="child">hello world-3</div>
  </div>
</body>
</html>

方法四

思路：使用css3 flex布局

优点：简单 快捷

缺点：兼容性（ie 需要支持11以上）

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
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>未知宽高元素水平垂直居中</title>
</head>
<style>
  .parent4{
    /*设置为弹性布局*/
    display: flex;
    /*填充物以水平轴（main axis）对齐，justify-content: flex-start | flex-end | center | space-between | space-around;*/
    justify-content: center;
    /*align-items在垂直轴（cross axis）对齐，align-items: flex-start | flex-end | center | baseline | stretch;*/
    align-items: center;
    width: 300px;
    height:300px;
    background: #FD0C70;
  }
  .parent4 .child{
    color: #fff;
  }
</style>
<body>
  <div class="parent4">
    <div class="child">hello world-4</div>
  </div>
</body>
</html>