如何让元素水平垂直居中

咱们常常遇到须要把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;  //这是必须的
}