Flexbox实现元素水平、垂直局中

gistfile1.html

<!--HTML-->
<div class="flex-container">
    <div class="flex-item">I'm centered!</div>
</div>

<!--CSS-->
<style>
  .flex-container {
    display: -webkit-flex;
    display: flex;
    width: 300px;
    height: 300px;
    background-color: #999;
  }

  .flex-item {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: #666;
  }
</style>