position实现盒子居中

 .main{
        height:500px;
        background: #555;
        position: relative;
 }
 .item{
        width:100px;
        height:100px;
        background: #ff5;
        text-align: center;
        position: absolute;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;
 }

 <div class="main">
    <div class="item"></div>
 </div>