布局--居中方案

水平居中

• inline-block + text-align

.child{ display: inline-block; }
.parent{ text-align: center; }

• table + margin

.child{
    display: table;
    margin: 0 auto;
}

display: table – 指定为块级元素的table，在表现上类似block元素，但是宽度为内容宽

• absolute + transform

.parent{ position: relative; }
.child{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

垂直居中

• table-cell + vertical-align

.parent {
    display: table-cell;
    vertical-align: middle;
}

• absolute + transform

.parent{position: relative;}
.child{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

• flex + align-items

.parent{
    display: flex;
    align-items: center;
}

垂直水平居中

• absolute

.parent {position: relative}
.child{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

• flex

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

• inline-block + text-align + table-cell + vertical-align

---

• absolute + transform