用css让一个容器水平垂直居中

转自：http://www.cnblogs.com/libin-1/p/5869430.html
方法一：position加margin

/**html**/
<div class="wrap">
    <div class="center"></div>
</div>

/**css**/
.wrap {
    width: 200px;
    height: 200px;
    background: yellow;
    position: relative;
}
.wrap .center {
    width: 100px;
    height: 100px;
    background: green;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

方法二： diaplay:table-cell

<!-- html -->
<div class="wrap">
     <div class="center"></div>
</div>

/*css*/
.wrap{
    width: 200px;
    height: 200px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.center{
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    background: green;
}

方法三：position加 transform

<!-- html -->

<div  class = "wrap" >

     <div  class = "center" ></div>

</div>

 

/* css */

.wrap {

     position: relative;

     background: yellow;

     width: 200px;

     height: 200px;}

 

.center {

     position: absolute;

     background: green;

     top:50%;

     left:50%;

     -webkit-transform:translate(-50%,-50%);

     transform:translate(-50%,-50%);

     width: 100px;

     height: 100px;

}

方法四：flex;align-items: center;justify-content: center

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>

/* css */
.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.center {
    background: green;
    width: 100px;
    height: 100px;
}

方法五：display:flex;margin:auto

<!-- html -->
<div class="wrap">
    <div class="center"></div>
</div>

/* css */
.wrap {
    background: yellow;
    width: 200px;
    height: 200px;
    display: flex; 
}

.center {
    background: green;
    width: 100px;
    height: 100px;
    margin: auto;
}

方法六：纯position

<!-- html -->

<div class= "wrap" >

     <div class= "center" ></div>

</div>

 

/* css */

.wrap {

     background : yellow;

     width :  200px ;

     height :  200px ;

     position :  relative ;

}

/**方法一**/

. center  {

     background :  green ;

     position :  absolute ;

     width :  100px ;

     height :  100px ;

     left :  50px ;

     top :  50px ; 

　　

}

/**方法二**/

. center  {

     background :  green ;

     position :  absolute ;

     width :  100px ;

     height :  100px ;

     left :  50% ;

     top :  50% ;

　　 margin-left : -50px ;

　　 margin-top : -50px ;

}

方法七：兼容低版本浏览器，不固定宽高

<!-- html -->

<div class= "table" >

     <div class= "tableCell" >

         <div class= "content" >不固定宽高，自适应</div>

     </div>

</div>

 

/*css*/

.table {

     height :  200px ; /*高度值不能少*/

     width :  200px ; /*宽度值不能少*/

     display : table;

     position :  relative ;

     float : left ;

     background : yellow;

}      

 

.tableCell {

     display :  table-cell ;

     vertical-align :  middle ;

     text-align :  center ;        

     * position :  absolute ;

     padding :  10px ;

     * top :  50% ;

     * left :  50% ;

}

.content {

     * position : relative ;

     * top :  -50% ;

     * left :  -50% ;

      background :  green ;

}