CSS簡單透過 display 為 flex 來使內部所有DIV 水平及垂直居中

很簡單地，不過其中對於 align-items 還是 justify-content 其他的 property 有空自己試試，才能真正修成正果，練就爐火純清的境界(紅字為其中比較重要的屬性)

HTML:
<div class="container">
  <div class="content">
    <div>Hello</div>
    <div>一步一腳印</div>
  </div>
</div>

CSS:
.container{
  width:50%;
  height:500px;
  background:red;
  display:flex;
}

.content{
  border:2px solid black;
  width:250px;
  height:80px;
  background:red;
  margin:auto;
  display:flex;
  align-items:center;   // 水平居中
  justify-content:center;   // 垂直居中
}