1.添加一个浮动div，居中内容清除浮动达到垂直居中效果
适用范围：通用
<style type="text/css">
.box{
width:100%;
height:500px;
background:#ccc;
}
.float{
float:left;
width:100%;
height:50%;
margin-bottom:-100px;
}
.content{
clear:both;
height:200px;
width:200px;
margin:0 auto;
background:red;
}
</style>
<body>
<div class='box'>
<div class="float"></div>
<div class="content"></div>
</div>
</body>2.使用绝对定位和负边距（或者translate）
适用范围：通用
<style type="text/css">
.box{
position:relative;
width:100%;
height:500px;
background:#ccc;
}
.content{
position:absolute;
top:50%;
left:50%;
/*margin-top:-100px;
margin-left:-100px;*/
transform:translate(-50%,-50%);
height:200px;
width:200px;
background:red;
}
</style>
<body>
<div class='box'>
<div class="content"></div>
</div>
</body>3.利用table-cell
<style type="text/css">
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:1000px;
height:500px;
background:#ccc;
}
.content{
width:100px;
height:100px;
margin:0 auto;
background:red;
}
</style>
<body>
<div class='box'>
<div class="content"></div>
</div>
</body>4.仅利用line-height
适用范围：只对文本有效(块级元素无效)
多行时，断词会有问题
<style type="text/css">
.box{
width:1000px;
height:500px;
line-height:500px;
background:#ccc;
}
.content{
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class='box'>
<span class="content">123123</span>
</div>
</body>5.使用flex
参考阮一峰两篇flex布局文章
http://www.ruanyifeng.com/blo…
http://www.ruanyifeng.com/blo…
<style type="text/css">
.box{
display: flex;
justify-content:center;
align-items:Center;
width:1000px;
height:500px;
background:#ccc;
}
.content{
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div class='box'>
<div class="content"></div>
</div>
</body>6.绝对定位和0
<style type="text/css">
.box{
position:relative;
width:1000px;
height:500px;
background:#ccc;
}
.content{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
width:100px;
height:100px;
overflow:auto;
margin:auto;
background:red;
}
</style>
<body>
<div class='box'>
<div class="content"></div>
</div>
</body>7.-webkit-box
<style type="text/css">
.box{
position:relative;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center;
width:1000px;
height:500px;
background:#ccc;
}
.content{
width:100px;
height:100px;
overflow:auto;
background:red;
}
</style>
<body>
<div class='box'>
<div class="content"></div>
</div>
</body>