通過上篇css 的規(guī)律摸索之路（一）css之三角形的規(guī)律及變化，我們已經(jīng)知道css三角形是怎么回事度陆，現(xiàn)在我們來看看另外一個(gè)撼嗓，常見的應(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;來實(shí)現(xiàn)，其中子元素垂直居中不能設(shè)定寬度和高度,子元素的內(nèi)容必須為文本或圖片,且文字盡量不能換行不然會(huì)溢出
display:table的方式
下來就是display:table的方式葱色，這是一種借助表格樣式的居中方式：
<div class="table_parent">
<div class="table_child">說明：通過父容器設(shè)定display: table;递宅，以及子元素設(shè)定display: table-cell; vertical-align: middle;來實(shí)現(xiàn)，其中子元素設(shè)定的高度寬度無效苍狰，子元素的內(nèi)容任意,內(nèi)容為文字時(shí)自動(dòng)換行照樣居中</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;來實(shí)現(xiàn)，其中子元素設(shè)定的高度寬度無效淋昭，子元素的內(nèi)容任意,內(nèi)容為文字時(shí)自動(dòng)換行照樣居中
絕對(duì)定位居中
絕對(duì)定位居中的方式俐填，這是一種借助絕對(duì)定位和外邊距的居中方式：
<div class="absolute_locating_parent">
<div class="absolute_locating_child">絕對(duì)定位居中</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;來實(shí)現(xiàn)翔忽，其中子元素必須固定寬高英融，子元素的內(nèi)容任意。其中絕對(duì)定位居中支持跨瀏覽器歇式，包括IE8-IE10驶悟，不論是否設(shè)置padding都可居中（在不使用box-sizing屬性的前提下），完美支持圖片居中材失。但是.必須聲明高度以及設(shè)置overflow:auto來防止內(nèi)容越界溢出痕鳍，在Windows Phone設(shè)備上不起作用。
彈性盒居中對(duì)齊
通過彈性盒來實(shí)現(xiàn)居中對(duì)齊龙巨，本人推薦的居中方式笼呆，但是注意兼容性。
<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>
這種方式的垂直居中效果如圖：
說明：通過彈性魔盒來實(shí)現(xiàn)居中恭应，這種方式特別優(yōu)雅只需要給父元素添加就可以抄邀，不論你子元素是什么樣子都居中
絕對(duì)定位和負(fù)margin
通過padding等份自填充來實(shí)現(xiàn)居中對(duì)齊的假象耘眨，除非特殊環(huán)境不然盡量不要使用這種居中方式昼榛。
div class="absolute_locating_margin">
<div class="absolute_locating_margin_child">絕對(duì)定位和負(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ǔ)定位來實(shí)現(xiàn)的居中，其子元素的寬度和高度必須固定
padding居中假象
通過padding等份自填充來實(shí)現(xiàn)居中對(duì)齊的假象剔难，除非特殊環(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填充來實(shí)現(xiàn)的假象，其父元素和子元素的高度是未知偶宫，由瀏覽器自由定義
到此垂直居中基本贅述完畢非迹，其實(shí)還有幾種但是個(gè)人覺得有些無腦加胡鬧
水平居中
text-align內(nèi)容居中
我們常用這種方式來進(jìn)行居中，對(duì)于需要居中的都得是行內(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;
對(duì)于這個(gè)大家一定很熟悉憎兽，很常用冷离。
<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
對(duì)于這個(gè)大家就不一定很熟悉西剥，其實(shí)很簡單，給子元素加上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é)
到此常見的居中方式就完畢了亿汞，我們可以對(duì)與兩個(gè)進(jìn)行配合應(yīng)用瞭空。
提示：后面還有精彩敬請期待，請大家關(guān)注我的CSDN博文：儂姝沁兒疗我，或者我的簡書專題：web前端咆畏。如有意見可以進(jìn)行評(píng)論，每一條評(píng)論我都會(huì)認(rèn)真對(duì)待吴裤。
