如何讓元素水平垂直居中

咱們常常遇到須要把div中的內容進行水平和垂直居中（多數是將圖片水平垂直居中），這裏把我經常使用的一些方法總結一下，可能比較low，煩請你們指正

• table-cell方法
  須要有兩個容器包住img，上代碼：

HTML

<div class="box">
    <div class="wrapper">
        <img src="./activity_pic.png">
    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
}
.box{
    background-color:#eee;
    border:2px solid #000;
    width:500px;
    height:500px;
    margin:50px auto;
    display:table;
}
.wrapper{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

IE8/Firefox/Chrome/Safari/Opera頁面效果：

IE6/IE7頁面效果：

IE6/7代碼兼容：

<!--[if lte IE 7]>
    <style>
        .box{
            position:relative;
        }
        .wrapper{
            position:absolute;
            left:50%;
            top:50%;
        }
        .wrapper img{
            position:relative;
            left:-50%;
            top:-50%;
        }
    </style>
<![endif]-->

• 容器中只有一個img，沒有其餘元素，可經過vertical-align方法居中
  當容器中只有一個img，而且img的狀態是行內元素時，能夠經過設置行高爲容器高度，設置img的vertical-align：middle居中，代碼：

div{
    height:300px;
    line-height:300px;
    text-align:center;
}
div > img{
    vertical-align:middle;
}

• 已知要居中元素的寬高，能夠經過定位的方法來實現垂直水平居中
  好比說要將div中的img居中，已知img高度規定爲300*200，則代碼以下：

div{
    position:relative;
}
div > img{
    width:300px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-150px;
}

• 還有一種定位方法
  html

<div class='dad'>
    <div class='son'></div>
</div>

css

.dad{
    position:relative;
}
.son{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;  //這是必須的
}