CSSのflexboxで上下左右を要素の中央に配置する

heightをとった要素に文字を入れると文字の縦位置は左上揃えになる。

flexboxで真ん中に配置する

flexboxの三行を使うだけで、要素内で文章を真ん中配置できる。

こちらは、2行以上の真ん中配置にも対応している。

<div class="box1">
    文章文章<br>文章文章
</div>
.box1 {
    width: 300px;
    height: 300px;
    background: #f00;
    color: #fff;
    /* ここから下の記述が真ん中配置の記述 */
    display: flex;
    justify-content: center;
    align-items: center;
}

実装後

真ん中配置の要素

ぜひ参考にしてみてください。

インスタでHTML,CSSの小技を配信中

タイトルとURLをコピーしました