【CSS】Flexboxを使って要素を上下左右中央に配置する方法

要素を左右だけではなく、上下左右中央に配置する方法は色々あるみたいですが、Flexboxを使って配置する方法をメモメモ。

<style>
.parent{
  display: -webkit-flex; /* Safari用 */
  display: flex;
  -webkit-justify-content: center; /* Safari用 */
  justify-content: center;
  -webkit-align-items: center; /* Safari用 */
  align-items: center;
}
</style>
 
<div class="parent">
<p class="child">天地左右の中央に配置</p>
</div>

【参考】[CSS]高さが分からない要素を天地・左右・天地左右の中央に配置するテクニックのまとめ