1.table-cell
<div class="box box1">
???????<span>垂直居中</span>
</div>
.box1{
???display: table-cell;
???vertical-align: middle;
???text-align: center; ???????
}
2.
.box2{
???display: flex;
???justify-content:center;
???align-items:Center;
}
3.绝对定位和负边距 //此方法用的较多，兼容性最好，但需要知道元素的宽高
.box3{position:relative;}
.box3 span{
??????????? position: absolute;
??????????? width:100px;
??????????? height: 50px;
??????????? top:50%;
??????????? left:50%;
??????????? margin-left:-50px;
??????????? margin-top:-25px;
??????????? text-align: center;
???????}
4.绝对定位和0
.box4 span{
? width: 50%;
? height: 50%;
? background: #000;
? overflow: auto;
? margin: auto;
? position: absolute;
? top: 0; left: 0; bottom: 0; right: 0;
}
5.translate
.box6 span{
??????????? position: absolute;
??????????? top:50%;
??????????? left:50%;
??????????? width:100%;
??????????? transform:translate(-50%,-50%);
??????????? text-align: center;
???????}
6.display:inline-block
.box7{
? text-align:center;
? font-size:0;
}
.box7 span{
? vertical-align:middle;
? display:inline-block;
? font-size:16px;
}
.box7:after{
? content:‘‘;
? width:0;
? height:100%;
? display:inline-block;
? vertical-align:middle;
}
7.display:flex和margin:auto
.box8{
??? display: flex;
??? text-align: center;
}
.box8 span{margin: auto;}
8.display:-webkit-box
.box9{
??? display: -webkit-box;
??? -webkit-box-pack:center;
??? -webkit-box-align:center;
??? -webkit-box-orient: vertical;
??? text-align: center
}
9.display:-webkit-box
<div class="floater"></div> ?
<div class="content"> Content here </div> ?
.floater {
??? float:left;
??? height:50%;
??? margin-bottom:-120px;
}
.content {
??? clear:both;
??? height:240px;
??? position:relative;
}
css实现居中几种方法
原文地址：http://www.cnblogs.com/ffyyy/p/7582365.html