方法一：使用绝对定位
大家都知道margin:0 auto;能够实现水平居中，但却不知道margin:0 auto;也是可以实现垂直居中的；
给居中元素添加如下样式：
.Absolute-Center {
border:2px solid red;
height: 200px;
margin: auto;
position: absolute;
top:; left:; bottom:; right:;
}
缺点：内容容易溢出，建议使用overflow:auto;
方法二：负margin方法
给居中的div设置样式：
<style>
* {
margin: 0;
padding: 0;
} .Absolute-Center {
width: 400px;
height: 200px;
background-color: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;
}
</style>
<body>
<div class="Absolute-Center">
</div>
</body>
方法三：css3的 transform 来实现
<style>
* {
margin: 0;
padding: 0;
}
.mydiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 200px;
}
</style>
<body>
<div class="mydiv" style="border: 2px solid red;"></div>
</body>
http://blog.csdn.net/freshlover/article/details/11579669
重新整理部分如下：
CSS实现垂直水平居中的方法（至少写2种）
（1） 文本的水平垂直居中
使用：line-height + text-align: center
<div class=”wrap”>
文本的垂直水平居中
</div>
html,body{
margin: 0;
}
.wrap{
line-height: 400px;
text-align: center;
height: 400px;
font-size:36px;
}
（2） 使用margin: auto 方法实现div水平垂直居中
<div class=”wrap”>
<div class=”content”></div>
</div>
.wrap{
Position: relative;
width: 200px;
height: 300px;
border: 1px solid red;
}
.content{
Position: absolute;
width: 50%;
height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid red;
}
（3） 负margin方法
<div class=”wrap”>
<div class=”content”></div>
</div>
.wrap{
Position: relative;
width: 200px;
height: 300px;
border: 1px solid red;
}
.content{
Position: absolute;
width: 180px;
height: 260px;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -90px;
border: 1px solid red;
}
（4） 让图片水平垂直居中，使用table-cell方法
<div class=”wrap”>
<img src=”tupian.png”/>
</div>
.wrap{
width: 200px;
height: 300px;
border: 1px solid red;
display:table-cell;
vertical-align: middle;
text-align:center;
}
img{
vertical-align:middle;
border: 1px solid red;
}
（5） 弹性盒子方法
<div class=”wrap”>
<div class=”content”></div>
</div>
.wrap{
width: 300px;
height: 200px;
border: 1px solid red;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.content{
padding: 20px;
border: 1px solid red;
}
（6） 使用CSS3的transform：translate（-50%,-50%）; 或者
transform：translate3d（-50%,-50%,0）;
<div class=”wrap”>
<div class=”content”></div>
</div>
.wrap{
width: 300px;
height: 200px;
border: 1px solid red;
position: relative;
}
.content{
Position: absolute;
width: 160px;
height: 100px;
left: 50%;
right: 50%;
transform: translate(-50%,-50%);或者用3d旋转的也可以
}