方法一
CSS代码
.container{
white-space:nowrap;height:400px;
}
.container :after{
display:inline-block;content:'';height:100%;width:0%;overflow:hidden;vertical-align:middle;
}
.content{
display:inline-block;vertical-align:middle;white-space:normal;
}
HTML代码
<div class="container">
<div class="content">我是垂直居中的内容</div>
</div>
方法二
CSS代码
.container{
height:400px;width:400px;display:table;
}
.content{
display:table-cell;vertical-align:middle;
}
HTML代码
<div class="container">
<div class="content">我是垂直居中的内容</div>
</div>
第一种方法代码看起来虽多，但有时比第二种方法好用。以上两种方法各有用途，关键看你的需求
