HTML
CSS
Sass
フロントエンド

要素を簡単に中央寄せする方法

display:flexを用いて子要素を中央に寄せる方法

html
<div class="parent">
 <div class="child"></div>
</div>
css
.parent{
 display: flex
 width: 100%;
 height: 100%;
}

.child{
 display: block;
 margin: auto;
 width: 100%;
 height: 100%;
}

*高さと幅は適宜指定