如何水平居中 flex <div>？

Question

那么水平居中 flex 的正确/正确方法是<div>什么？

#container {
  width: 100%;
  min-height: 100%;
}

<div id="container">
  <div className="horizontal-centered">Center this</div>
</div>

Answer 1

尝试这个

#container {
  width: 100%;
  min-height: 100%;
   padding: 0;
    margin: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div id="container">
  <div className="horizontal-centered">Center this</div>
</div>