怎樣讓元素垂直水平居中

元素垂直水平居中：

• 設置定位 結合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>