cssで縦横（上下左右）中央にテキストを配置｜レスポンシブに対応する２つの方法

横方向の「左右中央」は margin: auto や text-align: center がうまく効いてくれる場面が多いと思います。

ところが縦方向の「上下中央」になると、配置指定が難しくなります。

このページでは、レスポンシブな可変レイアウトでも「常に縦横中央」にテキスト等を配置できるcss指定を２種類ご紹介します。

可変レイアウトでも対応する上下中央は？

固定レイアウトなら、どのような方法でも中央揃えできれば問題ありません。ところが可変レイアウトは、デバイス幅に応じてボックスサイズや文字サイズ、文字の行数などを変化させる場面がたくさんあります。

したがって可変レイアウトでは、サイズや行数が変化しても「中央」を維持してくれる指定が望ましいです。

可変レイアウトで崩れやすい中央配置

以下のような指定は、中央からずれる原因になります。

ずれを補正するためにCSSのメディアクエリを使用し、デバイス幅に応じブレイクポイントごとに上記の値を修正することはできます。でも修正作業が大変です。

そこで「ずれる原因」を指定せず中央配置できれば、行数やサイズが変化しても中央から崩れない配置ができて、作業も楽になると思います。

vertical-align:を効かせ中央揃え

そもそも vertical-align: middle が何にでも効くといいのですが、vertical-align: はブロック要素で効きません。だからインライン要素かテーブルセルで使用しなければなりません。

インライン要素で使用は？

インライン要素にするとブロックに幅や高さを指定できません。よって実際には「使えない」場面が多いと思います。

テーブルセルで使用！

そこでテーブルセル display: table-cell で中央配置をしてみます。ただ留意点もあります。

テーブルセル自体にマージンが効かないため、ここではマージンの効く親要素の中にテーブルセルを入れてレイアウトを調整します。

また幅や高さの指定に「パーセント」が効きません。「●●px」は効きますが、上述した理由からここでは使用しません。

幅や高さ指定には「inherit」を使用する

そこで inherit を使用します。inherit は親の値を子が引継ぎますので、親に対し子は実質100%の幅や高さ指定となります。ただし親にも「％」が使用できなくなる点は注意が必要です。

vertical-alignを使用して上下中央揃え

実際に display: table-cell を使用し、vertical-align で中央配置を作成してみます。

①　四角い親ボックス内で、１行の文字
②　四角い親ボックス内で、３行の文字
③　四角い親ボックス内で、３行のアイコンフォントと文字

<div class="parent">
  <p class="child">一行の中央揃え</p>
</div>

<div class="parent">
  <p class="child">三行でも<br>上下左右の<br>真ん中</p>
</div>

<div class="parent">
  <p class="child"><i class="fas fa-cart-arrow-down fa-fw"></i>　買物<br><i class="fas fa-calculator fa-fw"></i>　計算<br><i class="fas fa-caret-square-right fa-fw"></i>　次へ</p>
</div>

.parent {
  float: left;
  margin: 0 15px;
  width: 150px;
  height: 150px;
  background-color: lightblue;
}

※上記は「中央揃え」と関係ないサイズや色等の指定です。

ここまでは、このページのサンプルに共通するhtmlとcssです。

ここから下の赤字が vertical-align: middle を使用するための記述です。

.child {
  display: table-cell;
  vertical-align: middle;
  width: inherit;
  height: inherit;
  text-align: center;      /* 横方向に中央揃え */
  border: 1px dashed red;      /* 子要素を点線で囲む */
}

中央配置ができました。親がブロック要素、子がテーブルセルで、親から子へサイズを引き継いでいます。親のサイズが可変になっても、子は中央配置のままでいてくれます。

「flexbox」で中央揃え

flexbox(フレキシブルボックス) は使われたことの無い方も多いと思いますが、display: flex で指定でき、柔軟なレイアウトを可能にするボックスです。

このボックスは色々な配置が可能ですが、その中で「水平」と「垂直」の中央配置を組み合わせ、縦横を中央揃えします。

フレキシブルボックスでの指定方法

①親要素に対し、display: flex (または inline-flex )を指定。
②親要素に対し、justify-content: center (子要素を水平方向に中央）を指定。
③親要素に対し、align-items: center (子要素を垂直方向に中央）を指定。

親要素に対する３つの指定で、子要素は上下左右中央配置になります。

フレキシブルボックスで中央配置

それでは実際にやってみます。

共通htmlと共通cssはそのままに、ここから下の赤字がフレキシブルボックスで縦横中央に指定する記述です。

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

child {
  text-align: center;      /* 横方向に中央揃え */
  border: 1px dashed red;      /* 子要素を点線で囲む */
}

配置は親側で全て指定できますので、子には何も記述しなくても「中央」が完成します。親のサイズが可変になっても、子は中央配置のままでいてくれます。

このページで紹介した２つの方法は、可変レイアウトとなっても上下左右の中央から崩れません。ただ、２つ目にご紹介した flexbox が手軽に中央配置できる方法だと思います。