css居中布局总结

<div class="parent">
    <div class="child"></div>
</div>

水平居中

1.inlink-block+text-align

.child {display:inlink-block;}
.parent {text-align:center;}

优点：兼容性好
缺点：子元素宽高不可设置

2.table+margin

.child {display:table; margin:0 auto;}

优点：只需要设置child（自己）

3.absolute+transform

.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}

优点：子元素不会对其他元素产生影响
缺点：兼容性问题

4.flex+justify-content

.parent {display:flex;justify-content:center;}

优点：只需设置parent节点
或者设置为

.parent {display:flex;}
.child {margin:0 auto;}

缺点：flex低版本ie不支持

1.table-cell+vertical-align

.parent {display:table-cell;vertical-align:middle;}

优点：只需设置父节点，兼容性好

2.absolute+transform

.parent {position:relative;}
.child {position:absolute;top:50%;transform:translateY(-50%);}

优点：子元素不会对其他元素产生影响
缺点：兼容性问题

3.flex+align-items

.parent {display:flex;align-items:center;}

优点：只需设置父节点
缺点：兼容性问题

1.inline-block+text-align+table-cell+vertical-align

.parent {text-align:center;display:table-cell;vertical-align:middle;}
.child {display:inline-block;}

2.absolute+transform

.parent {position:relative;}
.child { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

3.flex+justify-content+align-items

.parent {display:flex;justify-content:center;align-items:center;}