このサイト管理人はウェブサイトのデザインやコーディングを生業としていたが、しばらく現場から離れていた。そして、その間にCSSでいろいろなことができるようになっていた。

HTMLの要素を画面やそれを囲む領域の中央に表示する「センタリング」もCSSの定義で実現できる。そしてセンタリングの方法はCSSのバージョンが上がるにつれて様々な書き方が出てきた。以前は左右方向のみの定義だけだったが、現在では上下方向にもセンタリングができるようになった。

割といろんなところで使われるセンタリングだが、センタリングを使わない時期が長いと書き方を忘れてしまう。そこで、この記事ではセンタリングの書き方を調べた結果を書いていく。

前提とする動作

「CSSの書き方」といっても多様なため、次のことができるようにする。

• 画像など、大きさが固定のものをセンタリングする。
• 文章など、大きさが不定のものをセンタリングする。
• 左右方向、上下方向の両方でセンタリングする。
• レスポンシブデザインでも使えること。

作ってみた

あちこち探して作ってみたら、↓こんなふうになった。（位置が分かりやすいように背景に着色し、マージンを5pixel入れてある。）

ソースコード

htmlの構成とCSSの定義をどのようにしていけばいいかを見ていこう。

htmlの構成

htmlの構成は、センタリングをかける要素を囲むタグと、センタリングをかける本体に分けられる。

センタリングをかける要素を囲むタグ

センタリングをかける要素を囲むタグは↓のようになる。

<div class="centred-outer">
    <!-- センタリングをかける要素 -->
</div>

divタグにcssの定義を適用するためにclassを指定しておく。

センタリングをかけたいテキストのタグ

テキストにセンタリングをかけるタグは↓のようになる。

<p class="centred centred-text">表示する文字列</p>

pタグで文字列を囲み、センタリング用のcssの定義のclassを指定する。centredはテキストと画像に共通の定義で、centred-textでテキストのセンタリングに必要なcssの定義を指定する。

センタリングをかけたい画像のタグ

画像にセンタリングをかけるタグは↓のようになる。

<img src="画像ファイル名" class="centred">

imgタグにセンタリング用のcssの定義のclassを指定する。

cssの構成

cssは3つの要素で構成される。それぞれのcssの定義の意味は次のとおりである。

centred-outer

.centred-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

display

displayにflexを指定すると、flex(flexble：柔軟な)の名の通り、自在の位置に配置できるようになる。flexを指定すると、左右方向、上下方向の配置を指定できるようになる。

justify-content

justify-contentは横方向の揃え位置を指定する。centerで真ん中に配置される。

align-items

align-itemsは縦方向の揃え位置を指定する。centerで真ん中に配置される。

height

センタリングをかけたい要素を含む領域の高さを定義する。この定義がないと、上と下のpaddingに相当する隙間がなくなる。

centred

.centred {
    display: block;
}

ここでは「display: block;」を定義しておく。（このcentredの定義がなくても問題なく表示できたが、テキストや画像以外の要素でセンタリングがかからなくなるかもしれないので入れておく。）

centred-text

.centred-text {
    width: 600px;
}

ここにはテキストの表示用の定義としてwidthを入れる。widthにはテキストの表示幅を指定する。この表示幅の指定がないと、テキストは親要素の幅いっぱいに表示される。

ソースコードはこうなる

冒頭の表示のソースコードは↓のようになる。

<style>
.centred-outer {
    background-color:#aaaa00;
    margin:5px;
}
/* ↑この定義はサンプルを見やすくするためのもの */
.centred-outer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}
.centred {
    display: block;
}
.centred-text {
    width: 600px;
}
</style>
<div class="centred-outer">
    <p class="centred centred-text">寿限無　寿限無　五劫のすりきれ　海砂利水魚の水行末　雲来末　風来末　食う寝るところに住むところ　やぶら小路のぶら小路　パイポパイポ　パイポのシューリンガン　シューリンガンのクーリンダイ　クーリンダイのポンポコナーのポンポコピーの　長久命の長助</p>
</div>
<div class="centred-outer">
    <img src="https://mt8.studio/wbasep-content/uploads/2021/07/tempImg.png" class="centred">
</div>