宽度固定，高度不固定的div垂直水平居中

用 flexbox 的特性:

<div class="parent">
<div class="child"></div>
</div>
.parent {
     display: flex;
     width: 100%;
     height: 300px;
     background: #cecece;
     align-items: center; /* 垂直居中 */
     justify-content: center; /* 水平居中 */
}

.child {
     background: #000;
     width: 10%;
     height: 10%;
}

原文链接：https://segmentfault.com/q/1010000005898631