中の要素を上下左右の中央に表示させるCSSコード

中の要素を上下左右の中央に表示させたい場合は、displayをflexにし、justify-contentとalign-itemsをcenterにする

.container {
 display: flex;
 justify-content: center;
 align-items: center;
}
.box{
 background-color: #f53838;
 width: 300px;
 height: 200px;
}
<div class="container">
 <div class="box">これを中央に表示したい</div>
</div>

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です