默認(rèn)的HTML結(jié)構(gòu)和基本的樣式為：
<div class="parent">
<div class="child">Child</div>
</div>
<style>
.parent{width: 200px; height: 100px; background-color: orange;}
.child{background-color: green; color: #fff; width: 80px;}
</style>
水平居中
-
text-align：center
.parent{text-align: center;} .child{display: inline-block;}優(yōu)點(diǎn)： 兼容性都很好盏触。（display:inline-block可以采用*zoom:1; *display:inline;兼容）
缺點(diǎn)： text-align會(huì)讓子元素文字都居中顯示
-
margin：0 auto
.child{margin: 0 auto;}優(yōu)點(diǎn)： 比較通用的解決方案，兼容性也很好块饺。
-
position: absolute
.parent{position: relative;} .child{position: absolute;left:50%;transform: translateX(-50%);}優(yōu)點(diǎn)：居中元素不對(duì)其他元素產(chǎn)生影響赞辩。
缺點(diǎn)：CSS3新屬性支持IE9+，低版本瀏覽器不支持授艰。
-
flex
.parent{display: flex; justify-content: center;}flex是2009年w3c提出的一種布局解決方案辨嗽，簡單易用。
-
table
.parent{display: table;} .child{display: table-cell;text-align: center;}借組table的特性實(shí)現(xiàn)居中淮腾，兼容性好糟需。
垂直居中
-
padding
在父元素沒有固定而子元素固定的情況下，可以采用padding實(shí)現(xiàn)谷朝。
-
table
.parent{display: table;} .child{display: table-cell;vertical-align: middle;} -
absoulte
.parent{position: relative;} .child{position: absolute;top:50%;transform: translateY(-50%);} -
vertical-align: middle
借助table和vartical-align：middle可以實(shí)現(xiàn)垂直居中洲押；同時(shí)可以借組before偽類以及inline-block實(shí)現(xiàn)居中
.parent{ position: relative; /* z-index*/ } .parent::before{ content: " "; height: 100%; display: inline-block;/*能夠觸發(fā)vertical-align生效的條件：inline-block,原生具有inline-block特性（img button） table-cell等*/ width: 0%; vertical-align: middle; } .child{ display: inline-block; vertical-align: middle; } -
flex
.parent{display: flex;justify-content: center;flex-direction: column;}
垂直水平都居中
-
absoulte
假設(shè)不知道元素寬度時(shí)，可以采用下面方式：
.parent{position: relative;} .child{position: absolute;top: 50%; left: 50%; transform: translate(-50%, -50%);}如果知道子元素的寬高圆凰，可以采用：margin-left: -100px; margin-top: -100px;此類進(jìn)行表示
-
flex
.parent{display: flex; justify-content: center; align-items: center;}
