HTMLで中央寄せする方法6選を解説！
テキストや画像を中央寄せするさまざまな方法を解説します。今回は左右だけではなく縦方向の上下の中央寄せもご紹介します。CSSの基本的な内容から応用的な利用方法を学び、自分のコンテンツにあった方法で中央寄せを実現させましょう！
コンテンツ [表示]
HTMLで中央寄せしたい
テキストや見出し、画像を目立てさせようと思って位置を中央寄せにしたい時ってありますよね！
WordPressなどのブログサービスであれば、エディタツールの「中央寄せ」ボタンを押せば簡単にできますが、HTMLやCSSを使ってやりたい場合はどうしたらいんだろう・・・
今回は基本的な中央寄せからすこし応用した中央寄せの方法をご紹介します！
HTMLで中央寄せする方法6選
下記はHTMLで中央寄せする方法のサンプルコードです。
モダンブラウザはもちろん、IE11にも対応していますので、せひ試してみてください！
1.「text-align: center;」を使って中央寄せにする方法
text-align: center;を使って左右中央寄せにする方法です。
適用条件は、ブロック要素またはテーブルセルボックスの水平方向の配置となります。
簡単にいうとテキストや画像などのインライン要素全体をセンタリングする方法です。
HTML 「text-align: center;」を使って中央寄せにする方法
<h1>見出し</h1>
<p>テキスト</p>
<div class="img-center">
<img src="../imgs/example_01.jpg" width="200" alt="画像：イメージ">
</div>
<table>
<tbody>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
</tr>
<tr>
<td class="cell-center">テキスト</td>
<td>テキスト</td>
</tr>
</tbody>
</table>CSS 「text-align: center;」を使って中央寄せにする方法
/*
h1とp要素のように直接指定してもクラスで指定しても大丈夫です！
*/
h1 {
text-align: center;
}
p {
text-align: center;
}
/*
img要素はインライン要素になるため直接指定してもセンタリング出来ないので注意してください。
*/
.img-center {
text-align: center;
}
/*
table要素
*/
table {
width: 100%;
margin: 20px 0;
border-collapse: collapse;
}
th,td {
border: 1px solid #ccc;
}
.cell-center {
text-align: center;
}h1要素やp要素のようにテキストに対してセンタリングをおこなうのが基本的な使い方になります。
img要素はインライン要素になるので、直接text-align: center;を指定しても中央表示にはなりませんので注意してください。
table要素は、はじめのtd要素のみtext-align: center;を適用しました。
ですが、th要素も同様に位置が真ん中になっています。これは、デフォルトで適用されているCSSスタイルが原因です。
HTML要素はこのように初めからCSSスタイルが適用されているものがあるので注意してください。
2. 「margin: auto;」を使って中央寄せにする方法
margin: auto;を使って左右中央寄せにする方法です。
適用条件は、指定する要素がブロック要素である必要があります。
HTML 「text-align: center;」を使って中央寄せにする方法
<div class="box">
<p>左寄せテキストです。</p>
<p>左寄せテキストです。</p>
</div>CSS 「text-align: center;」を使って中央寄せにする方法
.box {
background-color: #328ec5;
width: 200px;/* 要素の幅指定は必須です */
margin-left: auto;
margin-right: auto;
}使用するHTMLタグの要素によってはdisplay:block;の適用が必要となります。
ブロック要素であるということは、横幅が100％ということなので中央寄せにすることはできません。
そのため幅（width）の指定を忘れずにおこないましょう。
タイトルでは、margin: auto;となっていますが、margin-leftとmargin-rightのプロパティの値がautoなっていれば大丈夫です！
3. 「vertical-align: middle;」を使って上下中央寄せにする方法
vertical-align: middle;を使って上下中央寄せにする方法です。
適用条件はインライン要素に対して利用します。
HTML要素だとtable要素内のtd要素に使う場合が多いです。
td要素はデフォルトでvertical-align: middle;が適用されている場合が多いので、
今回は、指定した要素をtable要素に変換するdisplay: table;の使い方と併せてご紹介します。
HTML 「vertical-align: middle;」を使って上下中央寄せにする方法
<div class="display-table">
<div class="display-table-cell">
ここにテキストが入ります。
</div>
<div class="display-table-cell align-middle">
ここだけ上下中央にします。
</div>
<div class="display-table-cell">
ここにテキストが入ります。<br>
ここにテキストが入ります。<br>
ここにテキストが入ります。
</div>
</div>CSS 「vertical-align: middle;」を使って上下中央寄せにする方法
/* 親要素をtable要素のように扱います */
.display-table {
display: table;
}
/* 子要素をtd要素のように扱います */
.display-table-cell {
display: table-cell;
background: rgba(240,133,154,.8);
border: 1px solid #fff;
}
/* 上下中央にするクラス */
.align-middle {
vertical-align: middle;
}親要素にはdisplay: table;、そのすぐ下の子要素にdisplay: table-cell;を適用します。
こうすることでtable要素のように扱うことができます。
display: table-cell;要素はtd要素のようにすべて横並びになり縦幅も自動で同じ大きさになります。
今回は、真ん中の要素にだけvertical-align: middle;を指定して上下中央へとセンタリングしています。
4. 「position: absolute;」を使って左右、上下中央寄せにする方法
position: absolute;を使ってあらゆる要素を左右、上下中央寄せにする方法です。
これまでのように、インラインやブロック要素の細かいレイアウトのことは考えなくても基準となる要素の範囲内であればセンタリングが出来ます。
HTML 「position: absolute;」を使って左右、上下中央寄せにする方法
<div class="parent">
<div class="child">
<img src="../imgs/example_01.jpg" width="200" alt="画像：イメージ">
</div>
</div>CSS 「position: absolute;」を使って左右、上下中央寄せにする方法
body {
margin: 0;
}
/* 親要素に基準位置を指定します */
.parent {
position: relative;
/* ウィンドウ幅を想定して指定していますが適宜変更してください */
width: 100vw;
height: 100vh;
}
/* .parentに対して.childを上下左右中央にします */
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);/* 要素の大きさの半分の距離を左、上方向に移動する */
-webkit-transform: translateY(-50%) translateX(-50%);
}基準の位置となる.parent要素にposition: relative;を適用します。
こうすることで、この.parent要素内を基準に.child要素の位置を決定します。
.child要素の位置は左と上から50％ずつを指定していますが、
このままだと.child要素の左上の角が中央の位置に移動してしまい、それでは中央とは言えません。
そこで、transform: translateY(-50%) translateX(-50%);を適用して要素の大きさの分だけ左上に引き戻します。
以前までは、marginプロパティに要素のpxサイズを指定する必要がありましたが、transformプロパティを利用することでこの処理は必要なくなり、さらに要素のpxサイズを指定する必要もなくなったので、どんな要素でも汎用的に使用することができます。
5. 「display: flex;」を使って左右、上下中央寄せにする方法
display: flex;を使って左右、上下中央寄せにする方法です。
display: flex;を利用したレイアウトは、一般的にFlexbox（フレックスボックス）と呼ばれています。
おそらく、この方法がいま最もポピュラーな方法となります。
HTML 「display: flex;」を使って左右、上下中央寄せにする方法
<div class="parent">
<div class="child"><img src="../imgs/example_02.jpg" width="200" alt="画像：イメージ"></div>
</div>CSS 「display: flex;」を使って左右、上下中央寄せにする方法
/* 上下中央にしたい親要素に適用してください */
.parent {
display: flex;
justify-content: center;/* 左右中央を指定しています */
align-items: center;/* 上下中央を指定しています */
height: 100vh;/* 高さは適宜変更してください */
}Flexbox（フレックスボックス）は、利用できるプロパティや値が数多く、奥が深いので今回は1つの要素のセンタリングで利用している各プロパティがどういった状態を付与しているのかのみを簡単に説明します。
中央寄せしたい要素の親要素（.parent）に、基本となるdisplay: flex;を適用します。
このプロパティを適用することで子要素（.child）はインライン要素のような状態になります。
複数子要素（.child）がある場合は横並びになるイメージですね！
そこへ、左右中央にするためにjustify-content: center;、上下中央にするためにalign-items: center;を適用してセンタリングしています。
上記のプロパティで左寄せや右寄せ、上下寄せなど自在にレイアウトを変更することができます。
6. 「background-position: center;」を使って画像を左右、上下中央寄せにする方法
background-position: center;を使って背景画像をブロック要素の左右、上下中央寄せにする方法です。
適用条件は、ブロック要素であり、また事前にサイズが決まっている必要があります。
HTML 「background-position: center;」を使って画像を左右、上下中央寄せにする方法
<div class="image">
<!-- ここに画像を配置します。 -->
</div>CSS 「background-position: center;」を使って画像を左右、上下中央寄せにする方法
body {
margin: 0;
}
.image {
background-image: url(../imgs/example_03.jpg);
background-repeat: no-repeat;
background-position: center;
/* 下記からは適宜変更してください */
background-size: 200px;/* この値を「cover」にすると要素いっぱいに画像が広がります */
width: 100vw;
height: 100vh;
}指定したい要素（.image）に対して、background-imageプロパティで背景画像を適用します。
同様にbackground-position: center;を適用するだけで画像を上下中央にすることができます。
この方法は、CSSで背景画像を適用する方法なので生のテキストは利用できません。
また、要素のサイズが決まっている必要もあるため限られたケースでしか利用できないように感じますが、background-size: cover;と組み合わせてよく利用されます。
この組み合わせは、どんな縦横比の画像サイズであってもトリミングをする必要がなく対応できるという優れたメリットがあります。
先でご紹介したposition: absolute;、display: flex;でも出来ますがこちらの方が比較的簡単です。
まとめ
いかがでしたでしょうか？
上記のサンプルコード以外にも左右、上下中央へセンタリングする方法はたくさんあります。
その中でも今回はよく利用する方法をご紹介しました！
筆者の経験としては、position: absolute;、display: flex;、background-position: center;のいずれかですべての中央にしたい要件は満たすことができると思います。
もちろん利用するHTMLタグの要素やプロジェクトのテンプレートなどによっては、うまく適用されないこともありますので注意して利用してくださいね！
