对于已知宽高的元素，无论垂直、水平居中相对来说都是比较容易的，因此主要是谈谈对于未知宽高的元素的水平垂直居中问题。

transform

利用css3的transform实现对于未知宽高的元素的水平/垂直居中是很容易的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 水平/垂直居中
// css
html,body,.container{
	width: 100%;
	height: 100%;
}
.container{
	position: relative;
	background: #aaa;
}
.center{
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate3d(-50%, -50%, 0);
	-moz-transform: translate3d(-50%, -50%, 0);
	-ms-transform: translate3d(-50%, -50%, 0);
	transform: translate3d(-50%, -50%, 0);
	background: #000;
	color: #fff;
}

1
2
3
4
5
6
// html
<body>
	<div class="container">
		<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
	</div>
</body>

flexbox

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
// css
html,body,.container{
	width: 100%;
	height: 100%;
}
.container{
	display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   	display: -moz-box;      /* OLD: Firefox (buggy) */
   	display: -ms-flexbox;   /* MID: IE 10 */
   	display: -webkit-flex;  /* NEW, Chrome 21–28, Safari 6.1+ */
   	display: flex;          /* NEW: IE11, Chrome 29+, Opera 12.1+, Firefox 22+ */

   	-webkit-box-align: center;
   	-moz-box-align: center; /* OLD… */
   	-ms-flex-align: center; /* You know the drill now… */
   	-webkit-align-items: center;
   	align-items: center;

   	-webkit-box-pack: center; -moz-box-pack: center;
   	-ms-flex-pack: center;
   	-webkit-justify-content: center;
   	justify-content: center;
}
.center{
	display: -webkit-box;
	display: -moz-box;
   	display: -ms-flexbox;
   	display: -webkit-flex;
   	display: flex;

   	-webkit-box-align: center;
   	-moz-box-align: center;
   	-ms-flex-align: center;
   	-webkit-align-items: center;
   	align-items: center;
}

1
2
3
4
// html
<div class="container">
	<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>

想要查看flexbox的兼容性，请去这里：Flexible Box Layout Module

table

1
2
3
4
5
6
7
8
9
// css
html,body,.center{
	width: 100%;
	height: 100%;
}
.center td{
	vertical-align: middle;
	text-align: center;
}

1
2
3
4
5
6
// html
<table class="center">
	<tbody><tr>
		<td>我居中<br/>我居中<br/>我居中<br/>我居中</td>
	</tr></tbody>
</table>

table-cell

既然table能实现，自然也就会想到将display设置为table来实现。当然，该方案是有局限性的，因为IE8以下的浏览器不支持display的table系value，所以你只能在IE8及以上浏览器以及非IE浏览器下才能看到效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
// CSS
html,body,.container{
	width: 100%;
	height: 100%;
}
.container{
	display: table;
	text-align: center;
}
.center{
	display: table-cell;
	vertical-align: middle;
}

1
2
3
4
// html
<div class="container">
	<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>

inline-block

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
// css
html,body,.container{
	width: 100%;
	height: 100%;
}
.container{
	text-align: center;
	font-size: 0;
}
.container:after,.container span{
	display:inline-block;
	*display:inline;
	*zoom:1;
	width:0;
	height:100%;
	vertical-align:middle;
}
.container:after{
	content:"";
}
.center{
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
	font-size:16px;
}

1
2
3
4
5
// html
<div class="container">
	<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>

因为使用inline-block会有间隙，所以这里设置父级font-size：0来消除间隙。由于ie8以下浏览器不支持伪对象::after，于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span，其作用等同inline-block中的::after。