初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

flexboxで上下左右中央揃えをするやり方

投稿日:

こういうのやりたいとき

実際にコード書いてみる。

<div class="flexbox-center">
    <span>真ん中</span>
</div>
.flexbox-center {
    display: flex; /* 子要素をflexboxで揃える */
    flex-direction: column; /* 子要素をflexboxにより縦方向に揃える */
    justify-content: center; /* 子要素をflexboxにより中央に配置する */
    align-items: center;  /* 子要素をflexboxにより中央に配置する */
    width: 200px; /* 見た目用 */
    height: 200px; /* 見た目用 */
    border: 1px solid; /* 見た目用 */
}
.flexbox-center span {
    border: 1px solid; /* 見た目用 */
}
真ん中

できました!

解説

display: flex; を使って直下の子要素(今回はspan)がflex-direction: column; を設定することで縦に並ぶようになる。
justify-content 縦方向、align-items 横方向の設定することで中央配置できる。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.