水平居中
inline-block+text-align
<div class="parent">
<div class="child">hello</div>
</div>
.child {display:inline-block;}
.parent {text-align:center;}
table+margin
/* table的特性不单独设置宽度;跟内容宽度一样(可以用margin: 0 auto)*/
.child {display:table;margin: 0 auto;}
absolute + transform
.parent {position:relative;}
.child {position:absolute; left: 50%;transform: translateX(-50%); }
flex + justify-content
/* .parent {display: flex;} .child {margin: 0 auto;} */
.parent {display: flex;justify-content:center;}
垂直居中
table-cell + vertical-align
<div class="parent">
<div class="child">hello</div>
</div>
/*把外层div变成单元格*/
.parent {display: table-cell;vertical-align: middle; }
absolute + transform
.parent {position: relative;}
.child {position:absolute; top: 50%;transform: translateY(-50%);}
flex + align-items
.parent {display: flex; align-items: center;}
居中
inline-block+text-align + table-cell + vertical-align
<div class="parent">
<div class="child">hello</div>
</div>
/*让.parent变成单元格*/
.parent {text-align: center; display:table-cell;vertical-align:middle;}
.child {display: inline-block;}
absolute + transform
.parent {position: relative;}
.child {position:absolute; left: 50%;top:50%; transform: translate(-50%,-50%);}
flex + justify-content + align-items
.parent {dispaly: flex; justify-content: center;align-items: center}
