CSS居中布局总结

<div class=”parent”>

<div class=”child”>demo</div>

</div>

1.水平居中

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不支持

2.垂直居中

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;}

优点：只需设置父节点

缺点：兼容性问题

3.水平和垂直均居中

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;}

思路：了解属性值特性，分解问题。

前端(VUE)零基础到就业课程：点击学习

清晰的学习路线+老师随时辅导答疑

自己动手写 PHP MVC 框架：点击学习

快速了解MVC架构、了解框架底层运行原理