水平垂直居中

vertical-align + text-align 方案

#outer {
    width:400px; // 方便看效果
    height:500px; // 方便看效果
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

flex 方案

#outer{
    display:flex;
    justify-content:center;
    aligns-item:center;
}

绝对定位

#outer {
    position: relative;
}
#inner {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
}