LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@Tamitchao

CSS 中央寄せする方法

Posted at

はじめに

今回はCSSによる中央寄せについてまとめていきます。

HTMLとCSSの初期状態

中央寄せする前のHTMLとCSSは次のようになります。

index.html
<div class="inline-outer">
  <span class="inline-inner">インライン</span>
</div>
<br>
<div class="block-outer">
  <div class="block-inner">ブロック</div>
</div>
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;
}

.inline-inner {

}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;
}
center_000.png

line-height

次のような特徴があります。

  • インライン要素の上下中央寄せ
  • 子要素が1行の場合のみ有効
  • heightとline-heightの値を合わせる
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  line-height: 80px;
}

.inline-inner {
  
}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  line-height: 80px;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;
}
center_001.png

インライン要素が上下中央寄せされています。
ブロック要素は上下中央寄せされず、その中のテキストが上下中央寄せされています。

また、インライン要素が2行以上の場合、2行目以降がはみ出てしまいます。

center_002.png

position, transform, top, left

次のような特徴があります。

  • インライン要素、ブロック要素の中央寄せ
  • 親要素に「position: relative」、子要素に「position: absolute」を指定する
  • 上下中央寄せの場合、子要素に「top: 50%」と「transform: translateY(-50%)」を指定する
  • 左右中央寄せの場合、子要素に「left: 50%」と「transform: translateX(-50%)」を指定する
  • 上下左右中央寄せの場合、子要素に「top: 50%」「left: 50%」と「transform: translate(-50%, -50%)」を指定する

どのような動きとなるか、上下中央寄せの場合で説明します（左右中央寄せも同じです）
positionの指定により、子要素は親要素を基準とした絶対位置に配置されます。
そしてtopの指定により、子要素は親要素の上下中央に配置されます。
しかし、このままでは親要素の上下中央に来るのは子要素の一番上の部分となります。
そこでtransformの指定により、子要素を半分だけ上に移動しています。

次のCSSは、上下左右中央寄せをした場合です。

center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  position: relative;
}

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

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  position: relative;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;

  position: absolute;
  transform : translate(-50%,-50%);
  top: 50%;
  left: 50%;
}
center_003.png

text-align

次のような特徴があります。

  • インライン要素の左右中央寄せ
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  text-align:center
}

.inline-inner {

}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  text-align:center
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;
}
center_004.png

インライン要素が左右中央寄せされています。
ブロック要素は左右中央寄せされず、その中のテキストが左右中央寄せされています。

margin

次のような特徴があります。

  • ブロック要素の左右中央寄せ
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;
}

.inline-inner {
  margin: auto;
}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;

  margin: auto;
}
center_005.png

ブロック要素が左右中央寄せされています。
インライン要素は左右中央寄せされていません。
また、どちらも上下中央寄せはされていません。

display, justify-content, align-items

次のような特徴があります。

  • インライン要素、ブロック要素の中央寄せ
  • 左右中央寄せの場合、「justify-content: center」を指定する
  • 上下中央寄せの場合、「align-items」を指定する
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

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

.inline-inner {
  
}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

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

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;
}
center_006.png

vertical-align, display

次のような特徴があります。

  • インライン要素、ブロック要素の上下中央寄せ
  • 「vertical-align:middle」は「display: table-cell」の子要素に有効
center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  display:  table-cell;
  vertical-align: middle;
}

.inline-inner {
  
}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  display:  table-cell;
  vertical-align: middle;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;
}
center_007.png

position, margin

次のような特徴があります。

  • ブロック要素の上下左右中央寄せ
  • 親要素に「position: relative」、子要素に「position: absolute」を指定する
  • 子要素のtop、right、bottom、leftをauto以外に指定する
  • 子要素のmarginをautoに指定する

なぜ「margin: auto」とは違って上下中央寄せされるのかというと、
次の条件を満たしている場合、上下のmarginは等しい扱いになるためです。

  • top、bottom、heightがauto以外
  • margin-top、margin-bottomがauto

次の記事が大変参考になります。
position: absolute; の指定で要素が上下左右中央配置になる理由

center.css
.inline-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  position: relative;
}

.inline-inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.block-outer {
  background-color: #8bc6ff;
  width: 320px;
  height: 80px;

  position: relative;
}

.block-inner {
  background-color: #7fffc8;
  width: 160px;
  height: 40px;

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
center_008.png

おわりに

他にも中央寄せの方法はあると思いますが、ざっとまとめただけでも方法がたくさんあることが分かりました。
方法によってはブラウザに対応していなかったりなどするので、色々な方法を知っていた方が良さそうです。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?