/* 块级居中 */
.block-center {
    display: block;
    width: 100px; 
    margin: 0 auto;
/*margin:0 auto有两个条件第一是一定要写宽度，第二个条件是display是flex block或者table*/
}

/* 绝对定位水平居中 */
.position-absolute-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* 绝对定位垂直居中 */
.position-absolute-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* 固定定位水平居中 */
.position-fixed-center {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}
/* 固定定位垂直居中 */
.position-fixed-center {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
}

/** 如果要用定位水平垂直两个一起居中 */
.position-fixed-center {
   position: absolute;
   top: 50%
   left: 50%
   transform: translate(-50%,-50%)
/** translatex是指水平平移，translateY是竖直平移，translate括号第一个参数代表translatex，第二个参数代表translatey */
}
/* 绝对定位居中 */
.position-absolute-center2 {
    position: absolute;
    left: 0;
    right: 0;
    width: 100px; /*一定要写宽度*/
    margin: auto;
}

/* 固定定位居中 */
.position-fixed-center {
    position: fixed;
    rigth: 0;
    left:0;
    width: 100px;
    margin: auto;
}
/* flex定位居中 */
.flex-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.flew-center2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

一起写水平居中才有用

• display: flex; //使用 flex 布局必写
• 1. 在 flex-direction: row 的时候, justify-content 管水平，align-items 管垂直
• 2. 在 flex-direction: column 的时候 ，align-items 管水平，justify-content 管垂直
• 3. flex-direction 默认是row，如果不写 flex-direction，flex-direction 就是 row
• row 和 column 的时候，justify-content 和 align-items 管的方向是调换了一下，fc是一个公共 flex 居中，所有页面都可以直接使用
• 使用 flex 对界面美观，布局更适合调控