CSSで文字を真ん中に配置する方法｜横・縦・中央寄せを簡単にマスター！

CSS

Webページを作っていて、

「テキストをキレイに真ん中に置きたい」

と思ったことはありませんか？

CSSを使えば、文字を横中央にするのも、上下中央にするのも簡単にできます。

この記事では、CSSで文字を真ん中に配置するための方法を、横方向・縦方向・完全中央の3パターンに分けてわかりやすく解説します。

初心者の方でも今すぐ使える実例とコツも紹介するので、ぜひ最後まで読んでみてください！

スポンサーリンク

横方向（左右）に文字を中央寄せする方法

text-alignを使った基本的な方法

一番シンプルで確実な方法は、text-align: centerです。

.box {
  text-align: center;
}

<div class="box">
  横中央に配置される文字
</div>

text-alignが効く要素

対象となる要素

  • テキスト（文字）
  • インライン要素（<span>、<a>、<img>など）
  • インラインブロック要素（display: inline-blockの要素）

実際の使用例

/* 見出しを中央寄せ */
.page-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

/* ボタンを中央寄せ */
.button-container {
  text-align: center;
}

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007BFF;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

<h1 class="page-title">ページタイトル</h1>

<div class="button-container">
  <a href="#" class="button">ボタン</a>
</div>

text-alignの値

値効果
left左寄せ（デフォルト）
center中央寄せ
right右寄せ
justify両端揃え

ブロック要素を横中央に配置する場合

text-alignはテキストやインライン要素用なので、<div>などのブロック要素を中央に置きたいときはmargin: autoを使います。

.child {
  width: 200px;  /* 幅を指定する必要がある */
  margin: 0 auto; /* 左右のmarginを自動調整 */
  background: #f0f0f0;
  padding: 20px;
  text-align: center; /* 中のテキストも中央寄せ */
}

<div class="child">
  ブロック要素も中央に
</div>

注意点

  • 幅（width）の指定が必須：幅がないと効果がない
  • margin: autoは左右方向のみ有効
  • 縦方向の中央寄せには別の方法が必要

縦方向（上下）に文字を中央寄せする方法

line-heightを使う方法（単一行テキスト限定）

単一行テキストなら、要素の高さとline-heightを同じにするだけで上下中央に配置できます。

.single-line-box {
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
}

<div class="single-line-box">
  上下中央の文字
</div>

実際の使用例

ボタンのテキスト中央寄せ

.button {
  width: 200px;
  height: 50px;
  line-height: 50px;  /* heightと同じ値 */
  text-align: center;
  background: #28A745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

ナビゲーションアイテム

.nav-item {
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #343A40;
  color: white;
}

line-heightの制限

使えるケース

  • 1行のテキストのみ
  • 高さが固定されている場合
  • シンプルなボタンやメニュー

使えないケース

<!-- 複数行になると崩れる -->
<div class="single-line-box">
  これは複数行の<br>
  テキストです
</div>

複数行テキストには適しません。行が折り返すと行間が広がってしまいます。

vertical-alignを使う方法（table-cell）

古い方法ですが、まだ使われることがあります。

.table-cell-box {
  display: table-cell;
  vertical-align: middle;
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  text-align: center;
}

問題点

  • レスポンシブデザインに不向き
  • 複雑なレイアウトと組み合わせにくい
  • 現在は推奨されない方法

横＋縦 どちらも真ん中に置く方法

flexboxを使う方法（推奨）

最近の王道はflexbox。文字を上下左右ともに中央に配置できます。

.flex-center {
  display: flex;
  justify-content: center; /* 横中央 */
  align-items: center;     /* 縦中央 */
  height: 200px;
  border: 1px solid #ccc;
}

<div class="flex-center">
  上下左右ど真ん中の文字
</div>

flexboxの詳細設定

基本パターン

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

複数行テキストの場合

.flex-multiline {
  display: flex;
  flex-direction: column;  /* 縦方向に配置 */
  justify-content: center; /* 縦中央（メイン軸） */
  align-items: center;     /* 横中央（クロス軸） */
  height: 200px;
  text-align: center;      /* テキスト自体も中央寄せ */
}

複数の要素を中央に配置

.flex-multiple {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;  /* 要素間のスペース */
  height: 200px;
}

<div class="flex-multiple">
  <span>要素1</span>
  <span>要素2</span>
  <span>要素3</span>
</div>

flexboxのメリット

  • 複数行テキストでもOK
  • 画像やボタンも同時に中央配置可能
  • レスポンシブ対応しやすい
  • 現代的で推奨される方法

CSS Gridを使う方法

よりシンプルに中央寄せするならCSS Gridもおすすめです。

.grid-center {
  display: grid;
  place-items: center;
  height: 200px;
  border: 1px solid #ccc;
}

<div class="grid-center">
  Gridで中央配置
</div>

place-itemsの詳細

/* place-items: center; は以下の短縮記法 */
.grid-center {
  display: grid;
  align-items: center;    /* 縦方向 */
  justify-items: center;  /* 横方向 */
}

複数要素のグリッド配置

.grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* 2列 */
  place-items: center;
  height: 200px;
  gap: 20px;
}

<div class="grid-layout">
  <div>アイテム1</div>
  <div>アイテム2</div>
</div>

Gridのメリット

  • 記述がシンプル
  • 2次元レイアウトに強い
  • 複雑なグリッド構造も対応可能

positionを使った中央寄せ

transformと組み合わせる方法

絶対配置とtransformを組み合わせる方法もあります。

.position-center {
  position: relative;
  height: 200px;
  border: 1px solid #ccc;
}

.centered-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="position-center">
  <div class="centered-text">
    絶対配置で中央
  </div>
</div>

使用場面

  • オーバーレイテキスト
  • モーダルウィンドウ
  • バナー画像上のテキスト

実用例：画像上のテキスト

.banner {
  position: relative;
  width: 100%;
  height: 300px;
  background: url('banner.jpg') center/cover;
}

.banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

<div class="banner">
  <div class="banner-text">
    バナーテキスト
  </div>
</div>

実際のWebページでの活用例

ヒーローセクション

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* 画面全体の高さ */
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: white;
  text-align: center;
}

.hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-button {
  padding: 12px 30px;
  font-size: 1.1rem;
  background: white;
  color: #667eea;
  text-decoration: none;
  border-radius: 25px;
  transition: transform 0.3s ease;
}

.hero-button:hover {
  transform: translateY(-2px);
}

<section class="hero">
  <h1 class="hero-title">Welcome to Our Site</h1>
  <p class="hero-subtitle">最高のサービスを提供します</p>
  <a href="#" class="hero-button">今すぐ始める</a>
</section>

カードコンポーネント

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 200px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}

.card-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #007BFF;
}

.card-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-description {
  color: #666;
  line-height: 1.5;
}

モーダルウィンドウ

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  position: relative;
}

.modal-title {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.modal-text {
  color: #666;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-button {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.modal-button.primary {
  background: #007BFF;
  color: white;
}

.modal-button.secondary {
  background: #6C757D;
  color: white;
}

よくある問題と解決方法

文字が切れてしまう場合

問題の例

.problem-box {
  width: 100px;  /* 幅が狭すぎる */
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ccc;
}

<div class="problem-box">
  長いテキストが切れる
</div>

解決方法

方法1：幅を調整

.solution-box {
  min-width: 200px;  /* 最小幅を確保 */
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #ccc;
}

方法2：flexboxで自動調整

.flex-solution {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50px;
  padding: 10px;
  border: 1px solid #ccc;
}

親要素の高さが決まっていない

問題の例

.no-height {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height が指定されていない */
}

縦中央寄せの効果が見えません。

解決方法

具体的な高さを指定

.with-height {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;  /* 明確な高さ */
}

ビューポートの高さを使用

.viewport-height {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;  /* 画面の高さ */
}

paddingで高さを作る

.padding-height {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px 0;  /* 上下のpadding */
}

レスポンシブ対応

モバイルでの調整

.responsive-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60vh;
  text-align: center;
}

@media (max-width: 768px) {
  .responsive-center {
    height: 50vh;
    padding: 20px;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .responsive-center {
    height: auto;
    min-height: 40vh;
    padding: 15px;
  }
}

フォントサイズの調整

.responsive-text {
  font-size: 2rem;
}

@media (max-width: 768px) {
  .responsive-text {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .responsive-text {
    font-size: 1.2rem;
  }
}

手法の使い分けガイド

状況別おすすめ手法

状況推奨手法理由
横方向のみtext-align: centerシンプルで確実
単一行の縦中央line-height軽量で高速
完全中央（現代）flexbox汎用性が高い
シンプルな中央CSS Gridコードが短い
オーバーレイposition + transform特殊配置に適している

パフォーマンス比較

軽い順

  1. text-align + line-height
  2. flexbox
  3. CSS Grid
  4. position + transform

柔軟性の高い順

  1. flexbox
  2. CSS Grid
  3. position + transform
  4. text-align + line-height

まとめ

CSSで文字を真ん中に配置する方法をマスターしましょう！

基本パターン

横だけ中央寄せ

.horizontal-center {
  text-align: center;
}

縦だけ中央寄せ（単行）

.vertical-center {
  height: 100px;
  line-height: 100px;
}

縦横完全中央（推奨）

.complete-center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

超シンプル（Grid）

.grid-center {
  display: grid;
  place-items: center;
  height: 200px;
}

選択の指針

迷ったらflexboxを選んでおけば、ほとんどの場面で対応できます。

  • 学習コストが低い
  • ブラウザサポートが充実
  • 複数行テキストにも対応
  • レスポンシブ対応しやすい
  • 他の要素とも組み合わせやすい

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました