HTMLで文字や要素を中央に寄せる方法を簡単に解説

displayプロパティについて

displayプロパティは、HTML要素の表示形式を制御するCSSプロパティで、中央寄せ実装の鍵となります。主な値にはblockやinline、inline-blockがあり、それぞれ異なる特性を持っています。

block要素はデフォルトで横幅いっぱいに広がるため、中央寄せにはmarginを使用します。inline要素やinline-block要素は親要素のtext-alignプロパティで中央寄せを制御できます。

非推奨タグ(centerタグ・align属性)について

HTML5以降、centerタグとalign属性は非推奨となった為、使用は可能な限り控えた方が良いでしょう。見た目の制御をHTMLで行うという古い手法であり、現在はCSSによるスタイル指定が推奨されています。

<!-- 非推奨の記述例 -->
<center>この記述は使用しないでください</center>
<div align="center">この記述も使用しないでください</div>
<td align="center">この記述も使用しないでください</td>

<!-- 推奨される記述例 -->
<div style="text-align:center">CSSで中央寄せします</div>

W3Cなどの標準化団体も、中央寄せなどの装飾はCSSで行うことを推奨しています。非推奨タグや属性を使用すると、将来的にブラウザでサポートされなくなる可能性があるため注意が必要です。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

text-align:centerで中央寄せ

text-align:centerは、inline要素やテキストを左右中央寄せする際に使用します。親要素に対して指定することによって、内部のテキストやinline要素が中央に配置されます。

<!-- HTML -->
<div class="container">
  <p>この文章は中央寄せされます</p>
  <img src="sample.jpg" alt="画像">
</div>

<!-- CSS -->
<style>
.container {
  text-align: center;
}
</style>

text-alignはblock要素自体には効果がなく、内部のテキストやinline要素にのみ適用されます。画像を中央寄せする場合はimgタグではなく、親要素に対してtext-align:centerを指定する必要があります。

margin:autoでを中央寄せ

margin:autoは、block要素を左右中央寄せする際に使用します。左右のmarginをautoに設定することによって、ブラウザが自動的に左右の余白を均等に配分し、要素を中央に配置します。

<!-- HTML -->
<div class="box">この要素は中央寄せされます</div>

<!-- CSS -->
<style>
.box {
  width: 300px;
  margin: 0 auto;
  background-color: #f0f0f0;
}
</style>

親要素がdisplay:inlineの場合、widthが効かないためmargin:autoも機能しません。その場合は親要素にdisplay:blockを指定する必要があります。

inline-blockで中央寄せ

inline-blockを使用することによって、block要素にtext-alignを適用できるようになります。block要素をinline-blockに変換し、親要素にtext-align:centerを指定する方法です。

<!-- HTML -->
<div class="parent">
  <div class="child">中央寄せされる要素</div>
</div>

<!-- CSS -->
<style>
.parent {
  text-align: center;
}
.child {
  display: inline-block;
  width: 200px;
  background-color: #e0e0e0;
}
</style>

inline-blockに変換すると、要素の内部のテキストも中央寄せされてしまいます。テキストを左寄せのままにしたい場合は、子要素に対してtext-align:leftを追加で指定します。

flexboxで中央寄せ

flexboxも広く使用されており、中央寄せを簡単に実装できます。親要素にdisplay:flexとjustify-content:centerを指定することによって、子要素を左右中央に配置できます。

<!-- HTML -->
<div class="flex-container">
  <div class="flex-item">中央寄せされる要素</div>
</div>

<!-- CSS -->
<style>
.flex-container {
  display: flex;
  justify-content: center;
}
.flex-item {
  width: 250px;
  background-color: #d0d0d0;
}
</style>

• justify-content:centerは左右方向の配置を制御
• 複数の要素を並べて中央寄せすることも可能
• レスポンシブデザインとの相性も良好

flexboxはIE11以降のブラウザで対応しています。

gridなどで中央寄せ

CSS Gridは、二次元のグリッドレイアウトを実現する手法です。place-itemsプロパティで簡潔に中央寄せを実装でき、複雑なレイアウトにも対応できる柔軟性を持っています。

<!-- HTML -->
<div class="grid-container">
  <div class="grid-item">中央寄せされる要素</div>
</div>

<!-- CSS -->
<style>
.grid-container {
  display: grid;
  place-items: center;
  min-height: 200px;
}
.grid-item {
  width: 300px;
  background-color: #c0c0c0;
}
</style>

Gridレイアウトはflexboxと組み合わせて使用することも可能で、より複雑なレイアウトを実現できます。IE11では一部の機能が制限されますが、モダンブラウザでは問題なく動作します。

【PR】『Python』を学べる企業・個人向けのプログラミングコース

• 「Python基礎・実践研修」

  

• 「オーダーメイドコース」

  

line-heightで中央寄せ

line-heightは、1行のテキストを上下中央に配置する方法です。親要素のheightとline-heightを同じ値に設定することによって、テキストが垂直方向の中央に配置されます。

<!-- HTML -->
<div class="box">
  <p>1行のテキストを上下中央に配置</p>
</div>

<!-- CSS -->
<style>
.box {
  height: 150px;
  background-color: #f5f5f5;
}
.box p {
  line-height: 150px;
}
</style>

• 親要素のheightと子要素のline-heightを同じ値にする
• 2行以上だと親要素からはみ出すため、1行限定で使用

この手法はボタン内のテキストやヘッダーのタイトルなど、確実に1行で収まる要素に適しています。改行が発生する可能性がある場合は、他の手法を検討する必要があります。

vertical-alignで中央寄せ

vertical-alignはtable-cell要素に対して有効なプロパティで、vertical-align:middleを指定すると上下中央に配置されます。親要素をdisplay:tableとdisplay:table-cellに設定することによって、テーブルの特性を利用した中央寄せを実現できます。

<!-- HTML -->
<div class="table-wrapper">
  <div class="table-cell">
    <p>複数行のテキストでも<br>上下中央に配置されます</p>
  </div>
</div>

<!-- CSS -->
<style>
.table-wrapper {
  display: table;
  width: 100%;
  height: 200px;
}
.table-cell {
  display: table-cell;
  vertical-align: middle;
  background-color: #e5e5e5;
}
</style>

この手法は複数行のテキストにも対応していますが、display:table-cellにはmin-heightやmin-widthが適用できない点に注意が必要です。従って、flexboxが使えない環境での代替手段として有用です。

position:absoluteとtransformで中央寄せ

position:absoluteとtransformを組み合わせると、複数行のテキストや要素を上下中央に配置できます。親要素をposition:relativeにし、子要素をabsoluteで配置してからtransformで位置を補正する方法です。

<!-- HTML -->
<div class="parent">
  <div class="child">
    複数行のテキストでも<br>
    上下中央に配置できます
  </div>
</div>

<!-- CSS -->
<style>
.parent {
  position: relative;
  height: 250px;
  background-color: #d5d5d5;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

• 親要素にposition:relativeを指定して基準位置を設定
• 子要素にposition:absoluteを指定して絶対配置
• transform:translateY(-50%)で正確な中央に配置

transformプロパティはIE9以降で対応しており、ベンダープレフィックス(-webkit-、-moz-など)を付けることによって、より広範なブラウザで動作します。

flexboxで中央寄せ

flexboxはalign-items:centerを指定することによって、子要素を垂直方向に中央配置できます。

<!-- HTML -->
<div class="flex-container">
  <div class="flex-item">
    flexboxで上下中央に<br>
    配置されます
  </div>
</div>

<!-- CSS -->
<style>
.flex-container {
  display: flex;
  align-items: center;
  height: 200px;
  background-color: #c5c5c5;
}
.flex-item {
  width: 250px;
}
</style>

flexboxは複数の子要素を並べて配置することも容易で、レスポンシブデザインとの相性も良好です。IE11以降のブラウザで対応しており、現在では特に理由がない限り積極的に使用できます。

gridで中央寄せ

CSS Gridは、二次元のグリッドレイアウトを実現する手法です。place-items:centerを使用することによって、子要素を上下左右の中央に配置できる為、flexboxよりも簡潔な記述で中央寄せを実現できる点が特徴です。

<!-- HTML -->
<div class="grid-container">
  <div class="grid-item">
    gridで上下中央に<br>
    配置されます
  </div>
</div>

<!-- CSS -->
<style>
.grid-container {
  display: grid;
  place-items: center;
  height: 200px;
  background-color: #b5b5b5;
}
.grid-item {
  width: 300px;
}
</style>

Gridレイアウトは、複雑な二次元レイアウトにも対応できる柔軟性を持っています。IE11では一部の機能が制限されますが、モダンブラウザでは問題なく動作するため、flexboxと並んで現在のウェブ開発で推奨される手法となっています。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【AWS】認定資格12種類の一覧や難易度、費用などを解説
• 
  Canvaとは？使い方やアカウント登録などを初心者向けに解説
• 
  git configで設定情報を確認・表示する方法
• 
  「Pythonはやめとけ」と言われる理由と学習するメリット
• 
  Ubuntuのversionを確認する方法

ITやプログラミングに関するニュース

• 
  テンダとシステムエグゼが共催ウェビナー開催、マニュアル作成と申請承認業務のDX化を解説
• 
  つくば市が株式会社PR TIMESと共催で広報PRセミナーを開催、プレスリリースの基礎と効果を解説
• 
  株式会社エネコムなど4社が米子市でeスポーツセミナーを開催、企業間交流で地域活性化を促進
• 
  ウィブル証券株式会社が米国株オプション税金ウェビナーを再開催、投資家の確定申告入門を解説
• 
  株式会社Cake.jpと株式会社関通が共催セミナーを開催、食品ECの勝ち筋とキャラクターコラボ戦略を解説