1.居中

确点：必须要使用position: absolute;，并且需要父亲是position: relative;

1.1 水平居中

position: absolute;
left: 50%;
transform: translateX(-50%);

1.2 垂直居中

position: absolute;
top: 50%;
transform: translateY(-50%);

1.3 水平垂直居中

position: absolute;
width: 900px;
height: 550px;
left: 50%;
top: 50%;
/* 这样可以水平垂直居中 */
transform: translate(-50%, -50%);

2.伸缩盒布局

2.1 水平垂直居中

display: flex;
/*水平对齐方式*/
justify-content: center;
/*垂直对齐方式*/
align-items:center;
/*折行*/
flex-wrap: wrap;

2.2 垂直排列（水平是居中的）

例：

display: flex;
flex-direction: column; /*主轴为垂直轴*/
justify-content: center; /*垂直轴居中*/
align-items: center; /*水平轴居中*/

注：居中指的是所有元素堆在一起进行居中，如果中间有margin就可以实现分离一点的效果！

注：主轴是相对的！