css实现居中几种方法

标签：auto   ble   relative   center   inline   需要   lock   16px   display   

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实现居中几种方法

标签：auto   ble   relative   center   inline   需要   lock   16px   display   

原文地址：http://www.cnblogs.com/ffyyy/p/7582365.html