DIV居中的方法 flex,transform

参考文献 https://github.com/simaQ/cssfun/issues/3

> CSS3，使用flexbox布局

抛开兼容性，不需要考虑宽度和高度值。

<div id="parent">
    <div id="item">test</div>
</div>

#parent {
    display: flex;
    width: 400px; /* 宽度值，随便啦 */
    height: 400px;  /* 高度值，随便啦 */
    background-color: yellow;
}

#item {
    width: 100px;/* 宽度值，随便啦 */
    height: 20px;/* 高度值，随便啦 */
    margin: auto;
    background-color: red; /* Magic! */
}

> 如何使用transform居中div? 

https://jingyan.baidu.com/article/3ea51489b053e852e61bbaa1.html

上下左右居中

.center {

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

}

单独上下居中或左右居中

上下

.center {

    left: 50%;

    transform: translateX(-50%);

}