让盒子水平垂直居中的三种方法(面试可能会问到)

第一种方法(可以细分出来3个小方法)：

第一个小方法

1. 设置好子绝父相
2. left:50%;top:50%;
3. margin-left:子盒子负的自身宽度的一半;margin-top:子盒子负的自身高度的一半;

第二个小方法

1. 设置好子绝父相
2. left:50%;top:50%;
3. transform:translate(-50%,-50%); //表示自身宽高的50%

第三个小方法

1. 设置好子绝父相
2. left:0;top:0;right:0;bottom:0;
3. margin:auto;

第二种方法flex布局：

1. 亲父级设置display:flex;属性
2. 亲父级中设置：justify-content: center; //主轴(此时是水平)居中
3. align-items:center; // 侧轴(此时是垂直)居中