水平居中
? ??1.1 display: inline-block
? ??????在塊級父容器中讓行內(nèi)元素或者類行內(nèi)元素居中，只需使用 text-align: center，
這種方法可以讓 inline/inline-block/inline-table/inline/flex 居中
? ? ? ? 例子：
? ??????????????.child {
????????????????????? display:inline-block;
? ????????????????????/*子元素文字會繼承居中，因此要在上面寫上向左邊居中*/
? ????????????????????text-align:left;
????????????????}
????????????????.parent {
????????????????????? text-align:center;
? ? ? ? ? ? ? ? ? }
? ??1.2 display:table
? ??????table 元素的寬度也是跟著內(nèi)容走，居中的時候加上 margin 即可。兼容IE8。
如果不設(shè)置成table,設(shè)置成別的塊級元素也可以，但是要強調(diào)設(shè)置寬度width，不然會拉伸成父元素的寬度。(注意加上 width 這種方法拓展性不好，如果 child div 里面的內(nèi)容很長的話可能超過設(shè)置的 width 的寬度)
? ? ? ? 例子：
? ??????????????.child {
? ????????????????????display:table;
????????????????????? margin:0 auto;
????????????????}
? ?1.3 position: absolute?
? ??????absolute 元素的寬度默認也是由內(nèi)容決定
這種方法的優(yōu)點是居中的元素不會對其他元素產(chǎn)生影響 脫離正常流
? ? ? ? 例子：
? ??????????.parent {
????????????????? position:relative;
????????????}
????????????.child{
????????????????? position:absolute; /*參照物是父容器*/
????????????????? left:50%;
????????????????? transform:translateX(-50%); /*百分比的參照物是自身*/
? ???????????}
? ?1.4 dispaly: flex
? ??????只兼容IE10+
? ??????.parent {
????????????? display:flex;
? ????????????justify-content:center;
????????}
????????/*或者*/
????????.child{
????????????? margin：0 auto;
????????}
