【CSS】子要素を親要素の中央に配置（簡易メモ）

参考サイト

https://qiita.com/mkurahara/items/67858ebf38ed8a6ea966

HTML

   <div class="parent">
       <div class="child"></div>
   </div>

positonを使う場合

CSS

.parent {
   position: relative;
}
.child {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom :0;
   margin:  auto;
}

※子要素に高さや幅を設定していない場合は、親要素と同じ大きさになります。

flexを使う場合
CSS

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
.child {
   width: 100px;
   height: 100px;
}