【CSS】常にコンテンツの真ん中に表示する方法 CSS 上下左右中央に固定する

こんにちは今回はCSSをつかってコンテンツを常に真ん中に表示する方法をご紹介します。

CSSでメインビジュアルを作っていく中で常に中央に表示させたいことがあると思います。レスポンシブ対応させるために縦横の幅を画面サイズに合うように調整すると思いますが、真ん中に表示するコンテンツもそれに伴って表示させたいと思うことがあるのでCSSを使って実装します。

メインビジュアルを作る

背景とタイトルを作る

<section class="main">
    <div class="container">
        <h1>WEBデザイン講座</h1>
        <p>中央表示に挑戦</p>
    </div>
</section>

こんな感じのトップページがあります。何も設定してないとこんな感じ

味気ない感じです。まず背景をつけましょう

.main{
    width: 100%;
    height: 100vh;
    background-image: url(https://yotamatsumaru.jp/blog/wp-content/uploads/2021/02/1S4A1049-scaled-e1613227286312.jpg);
    background-position: center;
    background-size: cover;
}

画面幅にはあっていますがタイトルが端に寄ってしまいます。

そこで<div class=”container”>に対してdisplay: flex;と指定します。

.main{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

それに追加して　justify-content: center;　align-items: center;もいれます。justify-content: center;０によりflexされたものに対する縦軸を中央にし、align-items: center;で横軸に対して中央に自動的に動かしてくれます。

最後に<h1>などの箱は中央によっていますが、中の文字が中央によってないのでtext-align: center;を追加して完成です。