通過上篇css 的規(guī)律摸索之路（一）css之三角形的規(guī)律及變化，我們已經(jīng)知道css三角形是怎么回事，現(xiàn)在我們來看看另外一個，常見的應(yīng)用：css之居中問題（垂直居中與水平居中）

垂直居中

單行文本垂直居中

首先，說說最簡單的常見居中方式-單行文本垂直居中：

<div class="single_line_text_box">
    <div class="single_line_text">單行文本垂直居中</div>
    <!-- <img src="" alt="" class="single_line_text"> -->
</div>
<style>
    .single_line_text_box {
        height: 100px; width: 100%; background: #333; line-height: 100px; text-align: center;
    }
    .single_line_text {
        vertical-align: middle; position: relative;
    }
</style>

這方式很簡單，我們常用來做單行文本的垂直居中，它的用處也只限與垂直居中包含文本的容器和圖片，并且寬高不能設(shè)定不然無法居中。

說明：通過父容器設(shè)定line-height，以及子元素設(shè)定vertical-align: middle;來實現(xiàn)，其中子元素垂直居中不能設(shè)定寬度和高度,子元素的內(nèi)容必須為文本或圖片,且文字盡量不能換行不然會溢出

display:table的方式

下來就是display:table的方式，這是一種借助表格樣式的居中方式：

<div class="table_parent">
        <div class="table_child">說明：通過父容器設(shè)定display: table;，以及子元素設(shè)定display: table-cell; vertical-align: middle;來實現(xiàn)，其中子元素設(shè)定的高度寬度無效，子元素的內(nèi)容任意,內(nèi)容為文字時自動換行照樣居中</div>
</div><br>
<div class="table_parent">
       <div class="table_child"><div class="table_child_content">display:table的方式</div></div>
 </div>
 <style>
        .table_parent {
            display: table; height: 100px; width: 100%; background: #eee; text-align: center;
        }
        .table_child {
            display: table-cell; vertical-align: middle;
        }
        .table_child_content {
            height: 20px; width: 500px; background: #aaa; display: inline-block;
        }
 </style>

這種方式的垂直居中效果如圖：

說明：這種方式通過父容器設(shè)定display: table;，以及子元素設(shè)定display: table-cell; vertical-align: middle;來實現(xiàn)，其中子元素設(shè)定的高度寬度無效，子元素的內(nèi)容任意,內(nèi)容為文字時自動換行照樣居中

絕對定位居中

絕對定位居中的方式，這是一種借助絕對定位和外邊距的居中方式：

<div class="absolute_locating_parent">
        <div class="absolute_locating_child">絕對定位居中</div>
    </div>
    <style>
        .absolute_locating_parent {
            height: 100px; width: 100%; position: relative; background: #eee;
        }
        .absolute_locating_child {
            margin: auto; position: absolute; width: 100px; height: 50px; background: #aaa;
            top: 0; left: 0; bottom: 0; right: 0;
        }
    </style>

這種方式的垂直居中效果如圖：

說明：通過父容器設(shè)定position: relative;，子元素設(shè)定margin: auto; position: absolute;top: 0; left: 0; bottom: 0; right: 0;來實現(xiàn)，其中子元素必須固定寬高，子元素的內(nèi)容任意。其中絕對定位居中支持跨瀏覽器，包括IE8-IE10，不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下），完美支持圖片居中。但是.必須聲明高度以及設(shè)置overflow:auto來防止內(nèi)容越界溢出，在Windows Phone設(shè)備上不起作用。

彈性盒居中對齊

通過彈性盒來實現(xiàn)居中對齊，本人推薦的居中方式，但是注意兼容性。

<div class="elastic_box_centering">
        <div class="iconloader">
            <!-- <div class="iconloader_child"></div> -->
            Loader...
        </div>
    </div>
    <style>
        .elastic_box_centering {
            display: flex;
            align-items: center; /*定義元素垂直居中*/
            justify-content: center; /*定義容器里的元素水平居中*/
            width: 100%; height: 300px;
            background: #eee;
        }
        .iconloader {
            background: #aaa;
        }
        /*.iconloader_child {
            width: 50px; height: 50px;
        }*/
    </style>

這種方式的垂直居中效果如圖：

說明：通過彈性魔盒來實現(xiàn)居中，這種方式特別優(yōu)雅只需要給父元素添加就可以，不論你子元素是什么樣子都居中

絕對定位和負(fù)margin

通過padding等份自填充來實現(xiàn)居中對齊的假象，除非特殊環(huán)境不然盡量不要使用這種居中方式。

div class="absolute_locating_margin">
    <div class="absolute_locating_margin_child">絕對定位和負(fù)margin</div>
</div>
<style>
    .absolute_locating_margin {
        height: 100px; width: 100%; background: #eee; position: relative;
    }
    .absolute_locating_margin_child {
        position: absolute; top: 50%; left: 50%;
        height: 50px; width: 180px; margin: -25px 0 0 -90px;
        background: #999;
    }
</style>

這種方式的垂直居中效果如圖：

說明：這種方式是通過定位然后利用margin彌補(bǔ)定位來實現(xiàn)的居中，其子元素的寬度和高度必須固定

padding居中假象

通過padding等份自填充來實現(xiàn)居中對齊的假象，除非特殊環(huán)境不然盡量不要使用這種居中方式。

<div class="padding_center">
    <div class="padding_center_child">padding居中</div>
</div>
<style>
    .padding_center {
        padding: 5% 0; width: 100%; background: #eee;
    }
    .padding_center_child {
        text-align: center; background: #999; color: #fff; padding: 10% 0;
    }
</style>

這種方式的垂直居中效果如圖：

說明：這種方式是通過padding填充來實現(xiàn)的假象，其父元素和子元素的高度是未知，由瀏覽器自由定義

到此垂直居中基本贅述完畢，其實還有幾種但是個人覺得有些無腦加胡鬧

水平居中

text-align內(nèi)容居中

我們常用這種方式來進(jìn)行居中，對于需要居中的都得是行內(nèi)元素或內(nèi)聯(lián)塊元素。

<div class="center">
    <div class="center_child">內(nèi)容居中</div>
</div>
<style>
    .center {
        height: 500px; width: 100%; background: #eee;  text-align: center;
    }
    .center_child {
       display: inline-block; width: 70px; height: 70px; background: #999; 
    }
</style>

margin: 0 auto;

對于這個大家一定很熟悉，很常用。

<div class="margin_center">
    <div class="margin_center_child">內(nèi)容居中</div>
</div>
<style>
    .margin_center {
        height: 500px; width: 100%; background: #eee;
    }
    .margin_center_child {
       width: 70px; height: 70px; background: #999; margin: 0 auto;
    }
</style>

說明：margin: 0 auto;這種居中方式特別適合寬和高固定的，但是不知道寬的他就解決不了了，于是下面的孕育而生

table+margin

對于這個大家就不一定很熟悉，其實很簡單，給子元素加上display: table;這句話就可以了

<div class="table_margin_center">
    <div class="table_margin_center_child">table_margin_center居中</div>
</div>
<style>
    .table_margin_center {
        height: 500px; width: 100%; background: #eee;
    }
    .table_margin_center_child {
        background: #999; display: table; margin: 0 auto;
    }
</style>

小結(jié)

到此常見的居中方式就完畢了，我們可以對與兩個進(jìn)行配合應(yīng)用。

提示：后面還有精彩敬請期待，請大家關(guān)注我的CSDN博文：儂姝沁兒，或者我的簡書專題：web前端。如有意見可以進(jìn)行評論，每一條評論我都會認(rèn)真對待。