CSS实现盒子水平垂直居中的几种优雅方法

CSS实现子盒子在父盒子里水平垂直居中的几种方法，前提：父、子盒子宽高均不为0，且子盒子宽高比父盒子小

方法1：父盒子开启flex布局，子盒子设置 margin: auto;

.outer {
    ...
    display: flex;
}

.inner {
	...
	margin: auto;
}

方法2：父盒子开启flex布局，设置主轴对齐方式(默认水平方向) justify-content居中，侧轴对齐方式 align-items 居中

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

方法3：父盒子开启相对定位，子盒子开启绝对定位，先让子元素向下移动父元素的一半，再让子元素向上移动自己的一半

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