【CSS】中央寄せのバリエーション 11パターン+α

水平方向中央寄せ

CASE01： text-align: center;

親のブロック要素に指定することで、中身の要素を中央揃えにします。

See the Pen Centering CSS – CASE01： text-align: center; by netamame (@netamame) on CodePen.

<section class="case-01">
  <div class="wrap">
    <p class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </p>
    <div class="img-wrap">
      <img src="https://images.unsplash.com/photo-1699969468338-42dd3f91bba6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDE3MTYyNDB8&ixlib=rb-4.0.3&q=85">
    </div>
  </div>
</section>

.content{
  text-align:center;
}
.img-wrap{
  text-align:center;
}

CASE02： margin-inline: auto;

margin-inline: auto; の色々なパターンを見てみます。

①幅を指定
左右のmarginをautoにし、幅の指定をしてやることで中央に揃います。

②内容の幅に合わせる
width: max-content; とすることで、具体的な幅を決めずに内容に応じた幅にすることも可能です。

③画像wrapを使用・幅を指定
画像にwrapする親要素を使用。その親要素にmargin-inline: auto;を指定します。

④画像のみ・block要素に変換
img要素に直接指定する場合は、displayの指定に注意。

See the Pen Centering CSS – CASE02： margin-inline: auto; by netamame (@netamame) on CodePen.

<h1>CASE02：margin-inline: auto;</h1>

<section class="case-01">
  <div class="wrap">
    <!-- ①幅を指定 -->
    <p class="content content-01">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </p> 
    <!-- ②内容の幅に合わせる -->
	<p class="content content-02">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </p>
    <!-- ③画像wrapを使用・幅を指定 -->
    <div class="img-wrap">
      <img src="https://images.unsplash.com/photo-1699969468338-42dd3f91bba6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDE3MTYyNDB8&ixlib=rb-4.0.3&q=85">
    </div>
    <!-- ④画像のみ・block要素に変換 -->
    <img src="https://images.unsplash.com/photo-1701220416880-2bfed18447bb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDI5NjYyNjZ8&ixlib=rb-4.0.3&q=85" class="img-only">
  </div>
</section>

// ①幅を指定
.content-01{
	width: min(400px,100%);
	margin-inline: auto;
}
// ②内容の幅に合わせる
.content-02{
	width: max-content;
	margin-inline: auto;
}
// ③画像wrapを使用・幅を指定
.img-wrap{
    width: 300px;
	margin-inline: auto;
}
// ④画像のみ・block要素に変換
.img-only{
    width: 300px;
	margin-inline: auto;
    display:block;
}

CASE03-A：display: inline-block;

内容を囲うブロックを中央寄せし、内容は左寄せとしています。

See the Pen Centering CSS – CASE03-A： display: inline-block; by netamame (@netamame) on CodePen.

<section class="case-03a">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
	text-align: center;
	.content{
		display: inline-block;
		text-align: left;
	}
}

CASE03-B：display: inline-block;

内容を囲うブロックを中央寄せして並べ、内容も中央寄せとしています。

See the Pen Centering CSS – CASE03-B： display: inline-block; by netamame (@netamame) on CodePen.

<section class="case-03b">
  <div class="wrap">
    <div class="content">
      BTN-01
    </div> 
		<div class="content">
      BTN-02
    </div>
  </div>
</section>

.wrap{
	text-align: center;
	.content{
		display: inline-block;
	}
}

CASE04：Flexbox(水平方向のみ)

Flexboxを使用して左右中央寄せを行います。

See the Pen Centering CSS – CASE04：Flexbox(水平方向のみ) by netamame (@netamame) on CodePen.

<section class="case-04">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
	display: flex;
    justify-content: center;
	.content{
		width:max-content;
	}
}

垂直方向中央寄せ

CASE05：padding

親要素の上下に同じpaddingを指定するシンプルな方法です。

See the Pen Centering CSS – CASE05： paddingを使用 by netamame (@netamame) on CodePen.

<section class="case-05">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
    padding:30px 0;
}

CASE06：display: table-cell; + vertical-align:middle;

親要素に display: table; 、中央寄せしたい子要素に display: table-cell; と vertical-align:middle; を指定します。

See the Pen Centering CSS – CASE06： by netamame (@netamame) on CodePen.

<section class="case-06">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

// Base settings
h1{
  font-size:16px;
}
.content{
  font-size:12px;
  line-height:2;
}


// main
.wrap{
  display: table;
  height:200px;
  .content{
  background: #eee;
  display: table-cell;
  vertical-align:middle
  }
}

上下左右中央寄せ

CASE07-A：display: grid; (要素が1つの場合)

親要素に対して display: grid; をしています。要素が1つの場合は2行で完結します。

See the Pen Centering CSS – CASE07： by netamame (@netamame) on CodePen.

<section class="case-07a">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap {
  display: grid;
  place-content: center;
}

CASE07-B：display: grid; (要素が複数ある場合)

要素が複数ある場合は3行になります。

See the Pen Centering CSS – CASE07B：display: grid; (要素が複数ある場合) by netamame (@netamame) on CodePen.

<section class="case-07a">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
    <img src="https://images.unsplash.com/photo-1699969468338-42dd3f91bba6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDE3MTYyNDB8&ixlib=rb-4.0.3&q=85">
  </div>
</section>

.wrap {
  display: grid;
  place-content: center;
  place-items: center;
}

CASE07-C：display: grid; + margin: auto;

CASE07A と CASE08B では親要素からの指定のみでしたが、子要素にmarginをかけることでのコントロールも可能です。

See the Pen Centering CSS – CASE07C：display: grid; + margin: auto; by netamame (@netamame) on CodePen.

<section class="case-07c">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
    <img src="https://images.unsplash.com/photo-1699969468338-42dd3f91bba6?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MDE3MTYyNDB8&ixlib=rb-4.0.3&q=85">
  </div>
</section>

.wrap{
  display: grid;
}
.content{
  margin: auto;
}
img{
  margin: auto;
}

CASE08：Flexbox(上下中央)

CASE04を発展させて垂直方向の中央寄せも加えています。

See the Pen Centering CSS – CASE08： by netamame (@netamame) on CodePen.

<section class="case-08">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
	display: flex;
  justify-content: center;
	align-items: center;
	.content{
		width:300px;
	}
}

CASE09：position + inset + margin

よく使用される方法ですが、少しクセがあります。

【必要条件】
　① 子要素の inset・width・height が auto以外 であること
　② 子要素の margin が auto であること
この２つの条件が揃うことで中央寄せになります。

※詳しくはこちら
https://hyper-text.org/archives/2014/08/position_absolute_center_layout/

See the Pen Centering CSS – CASE09： by netamame (@netamame) on CodePen.

<section class="case-09">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
  position: relative;
	.content{
	  position: absolute;
      inset: 0;
      margin: auto;
      width: max-content;
      height: 6rem;
	}
}

CASE10：position + transform

transformを使って要素のサイズの半分を戻すことを行っています。

See the Pen Centering CSS – CASE10： by netamame (@netamame) on CodePen.

<section class="case-10">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
  position: relative;
	.content{
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateY(-50%) translateX(-50%);
	}
}

CASE11：position + inset + translate

translateを使うことで、親要素よりも子要素が大きい場合でも中央寄せ になります。

See the Pen Centering CSS – CASE11： by netamame (@netamame) on CodePen.

<section class="case-11">
  <div class="wrap">
    <div class="content">
      私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。<br>
      これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。<br>
      私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。<br>
      よそよそしい頭文字などはとても使う気にならない。私が先生と知り合いになったのは鎌倉である。
    </div> 
  </div>
</section>

.wrap{
    position: relative;
    .content{
        position: absolute;
        inset: 50% auto auto 50%;
        translate: -50% -50%;
    }
}

カテゴリー: Web制作

タグ: CSS

CATEGORY

TAG

【CSS】中央寄せのバリエーション 11パターン+α

水平方向中央寄せ

CASE01： text-align: center;

CASE02： margin-inline: auto;

CASE03-A：display: inline-block;

CASE03-B：display: inline-block;

CASE04：Flexbox(水平方向のみ)

垂直方向中央寄せ

CASE05：padding

CASE06：display: table-cell; + vertical-align:middle;

上下左右中央寄せ

CASE07-A：display: grid; (要素が1つの場合)

CASE07-B：display: grid; (要素が複数ある場合)

CASE07-C：display: grid; + margin: auto;

CASE08：Flexbox(上下中央)

CASE09：position + inset + margin

CASE10：position + transform

CASE11：position + inset + translate

コメントを残すコメントをキャンセル

【JavaScript】要素を取得するメソッド３つ+α

【WordPress】functions.phpを分割する

【CSS】中央寄せのバリエーション 11パターン+α

水平方向 中央寄せ

CASE01： text-align: center;

CASE02： margin-inline: auto;

CASE03-A：display: inline-block;

CASE03-B：display: inline-block;

CASE04：Flexbox(水平方向のみ)

垂直方向 中央寄せ

CASE05：padding

CASE06：display: table-cell; + vertical-align:middle;

上下左右 中央寄せ

CASE07-A：display: grid; (要素が1つの場合)

CASE07-B：display: grid; (要素が複数ある場合)

CASE07-C：display: grid; + margin: auto;

CASE08：Flexbox(上下中央)

CASE09：position + inset + margin

CASE10：position + transform

CASE11：position + inset + translate

コメントを残す コメントをキャンセル

【JavaScript】要素を取得するメソッド３つ+α

【WordPress】functions.phpを分割する

水平方向中央寄せ

垂直方向中央寄せ

上下左右中央寄せ

コメントを残すコメントをキャンセル