Posted at

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

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%;
}

*高さと幅は適宜指定