Edit in JSFiddle

<div class="wrap">
  <section>
    <h1>ボックス要素</h1>
    <p>上下中央に配置してみる。</p>
  </section>
</div>

.wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  height:200px;
  background:#ccc;
}

.wrap section {
  margin: 10px;
  background: #F5F0CF;
  padding: 15px;
}