CSS布局方案小结

<div class="parent">
    <div class="child">DEMO</div>
</div>
.child{
    display: inline-block;
}
.parent{
    text-align: center;
}

<div class="parent">
    <div class="child">DEMO</div>
</div>
.child{
    position: relative;
}
.parent{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<div class="parent">
    <div class="child">DEMO</div>
</div>
.parent{
    display: flex;
    justify-content: center;
}

<div class="parent">
    <div class="child">DEMO</div>
</div>
.parent{
    display: flex;
}
.child{
    margin: 0 auto;
}

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

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

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

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