怎样让元素垂直水平居中

元素垂直水平居中：

• 设置定位 结合translate一块儿使用

.big{
    width:400px;
    height:400px;
    border:1px solid #ccc;
    position:relative;
}
.small{
    width:200px;
    height:200px;
    background-color:red;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

<div class="big">
    <div class="small">
    </div>
</div>

• 设置定位absolute 上下左右都为0 设置margin:auto;

.big{
    width:400px;
    height:400px;
    border:1px solid #ccc;
    position:relative;
}
.small{
    width:200px;
    height:200px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div class="big">
    <div class="small">
    </div>
</div>

• 例如图片居中：

  第一种：

.big{
        width: 400px;
        height: 400px;
        text-align: center;
        border:1px solid #ccc;
    }

.big img{
        vertical-align: middle;
    }
.big:after{
        content:'';
        display:inline-block;
        vertical-align: middle;
        height: 100%;
    }
    

<div class="big">
    <img src="mm.jpg" alt="" width="200">
</div>

​ 第二种： display:table-cell属性指的是让标签元素以表格单元格的形式呈现，相似于td标签，可是ie6/7不支持此属性，在使用此属性的时候，float、position:absolute 尽可能不要同时使用。能够设置高宽 padding值，可是margin没有反应。

.big{
        width: 400px;
        height: 400px;
        border:1px solid #ccc;
        display:table;
    }
.small{
        display:table-cell;
        text-align: center;
        vertical-align:middle;
    }

<div class="big">
        <div class="small">
            <img src="mm.jpg" width="200px"alt="">
        </div>
</div>

​ 第三种：相似第一种

.big{
        width: 400px;
        height: 400px;
        border:1px solid #ccc;
        text-align: center;
    }

img{
        vertical-align: middle;

    }
span{
        height: 100%;
        display:inline-block;
        vertical-align: middle;
    }

<div class="big">
        <img src="mm.jpg" width="200px" alt="">
        <span></span>
    </div>