CSS之元素居中方案

CSS常用的居中方案
如图的这种情况,我们要让子元素在父容器内上下左右居中,常用的居中方案有:
CSS之元素居中方案
1、定位 + 拉取自身宽度的一半(这种情况子元素需要固定大小)
CSS之元素居中方案
2、定位 + 位移 : 当子元素大小不固定时,我们要让元素居中可以使用transfom:translate(xx%, xx%); 因为translate的百分比是按照子元素来计算的。
CSS之元素居中方案
此时box2的宽高可不固定,子元素都可以在父容器内上下左右居中。
3、margin:auto + position的上下左右0
CSS之元素居中方案
4、通过display: flex;(在弹性盒子中,margin:auto;会让上下左右都生效)
CSS之元素居中方案