对于已知宽高的元素，无论垂直、水平居中相对来说都是比较容易的，因此主要是谈谈对于未知宽高的元素的水平垂直居中问题。
transform
利用css3的transform实现对于未知宽高的元素的水平/垂直居中是很容易的
// 水平/垂直居中
// 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;
}
// html
<body>
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>
</body>
flexbox
// 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;
}
// html
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>
想要查看flexbox的兼容性，请去这里：Flexible Box Layout Module
table
// css
html,body,.center{
width: 100%;
height: 100%;
}
.center td{
vertical-align: middle;
text-align: center;
}
// html
<table class="center">
<tbody><tr>
<td>我居中<br/>我居中<br/>我居中<br/>我居中</td>
</tr></tbody>
</table>
既然table能实现，自然也就会想到将display设置为table来实现。当然，该方案是有局限性的，因为IE8以下的浏览器不支持display的table系value，所以你只能在IE8及以上浏览器以及非IE浏览器下才能看到效果。
// CSS
html,body,.container{
width: 100%;
height: 100%;
}
.container{
display: table;
text-align: center;
}
.center{
display: table-cell;
vertical-align: middle;
}
// html
<div class="container">
<div class="center">我居中<br/>我居中<br/>我居中<br/>我居中</div>
</div>
inline-block
// 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;
}
// 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。