CSS實現元素水平垂直居中

水平垂直居中是頁面佈局中及其常見的樣式，關於實現方式也是多種多樣，閒話少說，咱們直接進去正題。

首先作一下基礎佈局：

<div class="outer">
    <div class="inner"></div>
</div>複製代碼

這裏咱們給出了兩個div,而後咱們來給這兩個div寫一下初始樣式：

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
}複製代碼

如今咱們能看到這兩個div是這樣顯示的：

好了，前戲到此爲止，下面是重頭戲了。

方法一：採用絕對定位，計算定位距離

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50px;   /*（父元素高度-子元素高度）/2*/
    left:50px;  /*（父元素寬度-子元素寬度）/2*/
}複製代碼

哦啦，就是如此的簡單，咱們來看看效果：

這種方法要根據父子元素的寬高來計算top和left的值，若是頁面佈局複雜起來，每個都這樣計算豈不是要煩死我這樣的數學白癡？我的以爲這種方法有點太粗暴了。

方法二：採用絕對定位，巧妙使用margin:auto

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:0px;
    bottom: 0px;
    left:0px;
    right:0px;
    margin:auto;
}複製代碼

好啦，來看效果

也能夠實現，徹底no problem! 只須要父元素相對定位，子元素絕對定位，而後設置top，bottom，left，right都爲0，再設置margin:auto（這時瀏覽器會給margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素塊在父元素中水平垂直居中）便可。

注意：利用margin:auto方法支持跨瀏覽器，支持百分比，可是必須聲明子元素的width或height(至少一項，否則會佔據父元素全部空間)。

方法三：採用絕對定位，利用負邊距

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50%;
    left: 50%;
    margin-top:-50px;  /* 子元素高度的一半 */
    margin-left:-50px; /* 子元素寬度的一半 */
}複製代碼

看，居中了：

這種方法也很容易理解的，來咱們簡單說一哈，當咱們設置了left和top各爲50%時，子元素左邊界距父元素左邊界50%,上邊界距父元素上邊界50%，其實此時，咱們能夠知道，子元素的左上角這個點，是水平垂直居中的，當咱們設了負邊距時，咱們能夠理解爲這個子元素向右向上各移了自身長度的一半，這就達到了水平垂直居中。

注意：利用負邊距方法優勢是具備良好的跨瀏覽器特性，兼容IE6/IE7，可是缺點是不能自適應，需設置子元素的寬高，不支持百分比，且負邊距值與padding和是否認義box-sizing: border-box有關，計算須要根據不一樣狀況。

方法四：transform用起來

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:relative;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}複製代碼

來，直接上圖：

這種方法和上一種方法的原理差很少，只是把上面的margin換成了transform，這種處理方式的好處在於咱們不須要知道子元素的寬高，直接用-50%就完事兒了。

注意：利用transform方法的好處是代碼量少，且你不用設置子元素的width與height,內容可由子元素裏的子元素任意撐開，優雅地溢出。但transform IE8不支持。

方法五：flex佈局

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    
}複製代碼

看效果：

Flex佈局即爲彈性佈局，只需將父元素設置三個屬性便可(display,justify-content,align-items)。

注意：利用flex方法代碼量少，不用設置子元素的width與height,內容可由子元素裏的子元素任意撐開，優雅地溢出。但flex IE8/IE9不支持。

總結：

方法介紹完了，問題講清楚了，廢話我就很少說了哦，完結撒花~~~