老師在課上羅列了幾種用css絕對(duì)居中的方法赤赊，也列出了關(guān)鍵代碼，這篇文章就作為上課內(nèi)容的一個(gè)補(bǔ)充，文中所用圖片也來(lái)自老師教案尖殃，老師教案?jìng)魉烷T(mén)???：
https://github.com/quanta2015/Web-Mooc/blob/master/T02-web-css-center.md
01負(fù)外邊距
基本思路：將設(shè)置了絕對(duì)定位的子元素水平和垂直偏移50%，然后在水平和垂直方向分別偏移負(fù)自身寬高的一半划煮，示意圖如下：
代碼如下：
<div id="parent1">
<div id="son1">
<div id="cont1"></div>
</div>
</div>
#parent1{
width: 500px;
height: 300px;
position: relative;
background-color: rgb(46,95,62);
}
#son1{
width: 250px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
}
#cont1{
width: 100%;
height: 150px;
margin-left: -50%;
margin-top: -75px;
background-color: rgb(23,48,31);
}
優(yōu)點(diǎn)：兼容性好分衫，代碼量少
不足：子元素的寬高需要確定，對(duì)于高度自適應(yīng)的容器會(huì)帶來(lái)問(wèn)題般此，建議把盒子設(shè)置成box-sizing:border-box
02負(fù)位移
基本思路：將設(shè)置了絕對(duì)定位的子元素水平和垂直偏移50%蚪战，然后用transforms屬性值將子元素偏移負(fù)自身寬高的一半，示意圖如下：
代碼如下：
<div id="parent2">
<div id="son2"></div>
</div>
#parent2{
width: 500px;
height: 300px;
position: relative;
background-color: rgb(46,95,62);
}
#son2{
width: 250px;
height: 150px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background-color: rgb(23,48,31);
}
優(yōu)點(diǎn)：支持子容器高度自適應(yīng)铐懊；適用于響應(yīng)式布局環(huán)境邀桑；移動(dòng)瀏覽器支持較好；代碼量少
不足：不支持IE8及以西啊瀏覽器科乎；需要添加瀏覽器私有前綴壁畸；translate可能受transform其他子屬性值的影響
03表格塊
基本思路：通過(guò)display中的table和table-cell屬性，模擬表格布局茅茂，示意圖如下：
代碼如下：
<div id="parent3">
<div id="son3">
<div id="cont3"></div>
</div>
</div>
#parent3{
width: 500px;
height: 300px;
display: table;
background-color: rgb(46,95,62);
}
#son3{
display: table-cell;
vertical-align: middle;
}
#cont3{
width: 50%;
height: 50%;
margin: auto;
background-color: rgb(23,48,31);
}
優(yōu)點(diǎn)：支持高度自適應(yīng)捏萍；可適應(yīng)響應(yīng)式環(huán)境；適用于多個(gè)子元素水平垂直居中環(huán)境空闲；兼容性好令杈；
不足：需要額外標(biāo)簽
04行內(nèi)塊
基本思路：將子容器和任一偽元素設(shè)置為行內(nèi)塊及水平居中，然后對(duì)父容器文本居中碴倾，示意圖如下：
代碼如下：
<div id="parent4">
<div id="son4"></div>
</div>
#parent4{
width: 500px;
height: 250px;
text-align: center;
overflow: auto;
background-color: rgb(46,95,62);
}
#parent4:after{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
#son4{
width: 250px;
height: 150px;
display: inline-block;
vertical-align: middle;
background-color: rgb(23,48,31);
}
優(yōu)點(diǎn)：支持子元素高度自適應(yīng)逗噩；適應(yīng)于多個(gè)子元素水平垂直居中環(huán)境；兼容性良好跌榔，IE7及以上支持
不足：當(dāng)存在多個(gè)子容器時(shí)异雁，注意盒子之間的間隙
05伸縮盒模型
基本思路：使用flexbox彈性盒模型設(shè)置居中，示意圖如下：
代碼如下：
<div id="parent5">
<div id="son5"></div>
</div>
#parent5{
width: 500px;
height: 300px;
background-color: rgb(46,95,62);
display: flex;
align-items: center;
justify-content: center;
}
#son5{
width: 250px;
height: 150px;
background-color: rgb(23,48,31);
}
優(yōu)點(diǎn)：不需要設(shè)置子元素的寬高僧须；適用于任意子元素水平垂直居中環(huán)境纲刀；提供更開(kāi)闊和便捷的布局思想；代碼量少担平；（(?>ω<*?)
自己比較喜歡的一個(gè)方法）
不足：IE10及以上兼容示绊，高級(jí)瀏覽器也部分存在兼容問(wèn)題芥挣；需要添加瀏覽器私有前綴；可能存在性能問(wèn)題耻台。
06絕對(duì)居中塊
基本思路：設(shè)置子元素外邊距auto及四個(gè)方向的偏移值為0做到水平垂直居中空免，示意圖如下：
代碼如下：
<div id="parent6">
<div id="son6"></div>
</div>
#parent6{
width: 500px;
height: 300px;
background-color: rgb(46,95,62);
position: absolute;
}
#son6{
width: 50%;
height: 50%;
background-color: rgb(23,48,31);
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
優(yōu)點(diǎn)：支持IE8及以上；代碼量少盆耽，便簽結(jié)構(gòu)簡(jiǎn)單蹋砚；通過(guò)用%設(shè)置寬高值實(shí)現(xiàn)適用于響應(yīng)式環(huán)境的目的
不足：高度必須定義
07外插入一個(gè)空元素&利用浮動(dòng)
基本思路：
通過(guò)定義一個(gè)子元素，把它的高定義為50%摄杂，寬隨意坝咐，設(shè)置margin-bottom達(dá)到絕對(duì)居中，示意圖如下：
代碼如下：
<div id="parent7">
<div id="floater"></div>
<div id="content7"></div>
</div>
#parent7{
width: 500px;
height: 300px;
background-color: rgb(46,95,62);
}
#content7{
clear: both;
height: 150px;
position: relative;
width: 50%;
margin: auto;
background-color: rgb(23,48,31);
}
#floater{
background-color: #ccc;
float: left;
margin-bottom: -75px;
height: 50%;
width: 50px;
}
優(yōu)點(diǎn)：使用于大多數(shù)瀏覽器（包括IE8及以上）析恢；沒(méi)有足夠的空間時(shí)（如：窗口縮心帷），content不會(huì)被截?cái)?/p>
不足：需要額外的空元素映挂；用到了浮動(dòng)泽篮，容易影響整體布局
主要都是老師的內(nèi)容照搬照抄，一些地方加入了自己的理解柑船，方便查閱帽撑。
