上下左右垂直居中的几种方式

前两天大屏各种居中的UI图，顺便捋一捋几种方式吧

flex 方式

• 给父级设置justify-content: center;，并且设置所有子集的对齐默认方式align-items: center;;
• 也可以给每个子集单独设置子集的对齐方式align-self: center;

.farther{
    height: 200px;
    width: 200px;
    border:1px solid #000;
    // flex
    display: flex;
    justify-content: center;
    align-items: center;
    .child{
        width: 30px;
        height: 30px;
        // align-self: center;
        background: #000;
    }
}

position:absolute

• 父级设置 position: relative;
• 子div 设置position: absolute;，并且，top和left都便宜50%；但是会包含子集的高，于是再继续使用transform: translate(-50%,-50%);
• translate(-50%,-50%):往上（x轴）,左（y轴）移动自身长宽的 50%

.farther{
    height: 200px;
    width: 200px;
    border:1px solid #000;
    // position
    position: relative;
    .child{
        width: 30px;
        height: 30px;
        background: #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
}

上下左右为0，margin:auto

• 这就像四个方向有相同的力在拉这个盒子;配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。

.farther{
    height: 200px;
    width: 200px;
    border:1px solid #000;
    // position
    position: relative;
    .child{
        width: 30px;
        height: 30px;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
}

table-cell + inline-block

• 父级设置display:table-cell，并且垂直、水平居中
• 子div设置inline-block实现居中

.farther{
    height: 200px;
    width: 200px;
    border:1px solid #000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    .child{
        width: 30px;
        height: 30px;
        background: #000;
    }
}