水平布局
要求：
里外容器的寬度都是不一定的
<div class="parent">
<div class="child">DEMO</div>
</div>
Methods ①：inline-black + text-align
優(yōu)點(diǎn)：兼容性比較好，兼容到IE6\7瀏覽器
缺點(diǎn)：child會(huì)繼承父元素屬性，內(nèi)容也會(huì)居中，在.child中添加text-align:left
.child{
display: inline-block; //特點(diǎn)：寬度根據(jù)內(nèi)容
}
.parent{
text-align: center; //特點(diǎn)：對(duì)inline元素起作用
}
Methods ②：table + margin
優(yōu)點(diǎn)：只需要對(duì)自己設(shè)置，IE8以上瀏覽器都是支持的
兼容IE6\7：結(jié)構(gòu)換成table
.child{
display: table; //特點(diǎn)：非常像black元素，區(qū)別寬度跟著內(nèi)容走
margin: 0 auto；
}
Methods ③：absolute + transform
優(yōu)點(diǎn)：居中的元素不會(huì)對(duì)其他元素產(chǎn)生影響
缺點(diǎn)：IE6/7/8兼容性不支持，需要加入一些私有前綴
.parent{
position: relative; //父容器設(shè)置相對(duì)定位，編程參照物
}
.child{
position: absolute; //特點(diǎn)；寬度由內(nèi)容決定
left: 50%；
transform: translateX(-50%);
}
Methods ④：flex + justify-content
優(yōu)點(diǎn)：只需要設(shè)置parent節(jié)點(diǎn)
缺點(diǎn)：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //特點(diǎn)：寬度就變成了內(nèi)容的寬度
justify-content: center;
}
Methods 2：
.parent{
display: flex;
}
.child{
margin: 0 auto;
}
垂直居中
要求：
里外容器的寬度都是不一定的
<div class="parent">
<div class="child">DEMO</div>
</div>
Methods ①：table-cell + vertical-align
優(yōu)點(diǎn)：兼容性比較好，兼容到IE8以上瀏覽器
兼容IE6\7：結(jié)構(gòu)換成table
.parent{
display: table-cell;
vertical-align: middle;
}
Methods ②：absolute + transform
優(yōu)點(diǎn)：居中的元素不會(huì)對(duì)其他元素產(chǎn)生影響
缺點(diǎn)：IE6/7/8兼容性不支持，需要加入一些私有前綴
.parent{
position: relative; //父容器設(shè)置相對(duì)定位，編程參照物
}
.child{
position: absolute; //特點(diǎn)；寬度由內(nèi)容決定
top: 50%；
transform: translateY(-50%);
}
Methods ③：flex + align-items
優(yōu)點(diǎn)：只需要設(shè)置parent節(jié)點(diǎn)
缺點(diǎn)：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //child會(huì)撐滿整個(gè)容器
align-items: center;
}
Methods 2：
.parent{
display: flex;
}
.child{
margin: 0 auto;
}
居中（水平+垂直）
要求：
里外容器的寬度都是不一定的
Methods ①：inline-block + text-align + table-cell + vertical-align
優(yōu)點(diǎn)：兼容性比較高
缺點(diǎn)：table-cell在低版本不支持，可以換table結(jié)構(gòu)
.parent{
text-align: center; //水平居中
display: table-cell; //垂直居中
vertical-align: middle; //垂直居中
}
.child{
display: inline-block; //水平居中
}
Methods ②：absolute + transform
優(yōu)點(diǎn)：居中的元素不會(huì)對(duì)其他元素產(chǎn)生影響
缺點(diǎn)：IE6/7/8兼容性不支持，需要加入一些私有前綴
.parent{
position: relative; //父容器設(shè)置相對(duì)定位，編程參照物
}
.child{
position: absolute; //特點(diǎn)；寬度由內(nèi)容決定
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Methods ③：flex + justify-content + align-items
優(yōu)點(diǎn)：只需要設(shè)置parent節(jié)點(diǎn)
缺點(diǎn)：flex，IE6/7/8不兼容
Methods 1：
.parent{
display: flex; //特點(diǎn)：寬度就變成自身的寬度，高度撐滿
justify-content: center;
align-items:center
}
總結(jié)：
所列的解決方案不一定是全的，做解決方案大致的思路：
首先，需要了解CSS里面很多屬性它的值，它的一些特性
然后，對(duì)問(wèn)題進(jìn)行分解
最后，把這些特性與分解出來(lái)的問(wèn)題做練習(xí)，這個(gè)問(wèn)題可以用那些特性去實(shí)現(xiàn)
