HTML / CSS｜ブロック要素内でブロック要素を上下左右中央揃えにする方法

こんにちは、京町啓一です。

今回は、ブロック要素内でブロック要素を上下左右中央揃えにする方法を紹介します。

HTML/CSSを記述していると、使うことが多いものですので、身につけておいていただければと思います。

HTML

// index.html

<div class="wrapper">
　　<p>この p要素（ブロック要素）を上下左右中央にしたい</p>
</div>

左右中央揃えというと、text-align:center; が頭に浮かぶ方が多いと思います。

こちらは block 要素にも適用できますので、左右中央揃えにすることができます。

// index.html

<div class="wrapper">
　　<p>この p要素（ブロック要素）を上下左右中央にしたい</p>
</div>

// style.css

.wrapper {
    text-align: center;
　}

上下中央揃えというと、vertical-align: middle; としたくなるかもしれませんが、block 要素には適用できません。 iniline 要素とtable-cell にしか CSS が効かない仕様になっています。

block 要素を display: inline; などとして適用させることもできますが、要素の数が多くなってくると非常に管理が煩雑になります。

// index.html

<div class="wrapper">
　　<p>この p要素（ブロック要素）を上下左右中央にしたい</p>
</div>

// style.css

.wrapper {
    text-align: center;
    vertical-align: middle;
    }

p {
  display: inline;
  }

text-align、vertical-align ともに p要素の親要素である wrapper クラスに記述する点も忘れやすいので注意しましょう。

// index.html

<div class="wrapper">
　　<p>この p要素（ブロック要素）を上下左右中央にしたい</p>
</div>

// style.css

.wrapper {
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center;     /*上下中央揃え*/
　}

p 要素（上下左右中央揃えにしたい要素）の親要素である wrapper クラスにCSSを記述している点に注意しましょう。

FlexBox で記述する方法が一番すっきりすると思います。

書き方はいろいろとありますので、今回の内容をきっかけにレイアウト系のCSSに理解を深めていくと、思い通りのウェブサイトをつくりやすくなるでしょう。