页面居中总结

有时候为了各种居中，因为要做到适配，如果页面宽度该变还想要居中，经过实践，现将总结的方案写下来。

---

水平居中

1.子盒子使用display:inline-block;
父盒子使用text-align:center
优点是兼容性比较好

2.子盒子使用display:table;margin:0 auto

3.父盒子使用position:relative
子盒子使用position:absolute;left:50%;translateX(-50%)
这种方法的优点是脱离的文档流对其他元素没有影响，缺点是css3支持才行。

4.父盒子：display:flex; justify-content:center;
或者父盒子:display:flex; 子盒子：margin: 0 auto;

垂直居中

1.父盒子：display:table-cell; vertical-align:middle;

2.父盒子:display:relative; 子盒子：display:absolute;top:50%;transform:translateY(-50%)

3.父盒子：display:flex;align-items:center

水平和垂直都居中

1.inline-block,text-align+table-cell,vertical-align是综合上面的水平居中和垂直居中

2.absolute+transform

3.flex,justify-content,aligin-items

---

从这些解决方案，我们可以得出要想解决一定得到布局问题，就必须对css的一些属性特别了解，然后还有会分解问题，将大的问题分解成一些小的问题，然后再解决，然后就是要勤加练习，遇到问题，解决问题，学习新技术，才可以发现新的解决方案。