Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
143
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

Organization

[CSS/HTML]上下左右中央揃えまとめ。

上下左右中央に揃えるときのcss、いつもどれがどれかわからなくなるのでまとめ。

左右中央揃え

text-align: center;

ブロック要素に指定。 
そしたら中のインライン要素を真ん中にする。

文章の横ライン中央揃えはこれが基本。
親要素に指定しても反映してくれる。

image.png

<p class="text-center">まなちゃんは猫</p>
.text-center{
  text-align: center;
}

参考:text-align:centerが効かない!text-alignは何に効くCSSかNatsuMemo ナツメモ

margin: 0 auto;

サイト全体のレイアウトを中央寄せにするときによく使う。
widthの指定が必須。

下記は幅100%の親要素、からwidth: 80%;の幅でcontainerが中央寄せになり表示される。
またレスポンシブ対応としてmax-width: 500px;で、幅500px以上は大きくならない指定になる。

image.png

<div class="body">
 <div class="container">
   <p>まなちゃんは猫</p>
  </div>
</div>

.body{
  background: lightgray;
}
.container{
  background: yellow;
  width: 80%; /* 幅は親要素の80% */
  max-width: 500px; /* 幅は最大500pxまでしか広げない */
  margin: 0 auto; /* 左右をauto指定にして左右中央揃えに */
}

参考:CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

上下中央揃え

vertical-align: middle;

同じ階層にあるインライン要素、またテーブルセルを、上下中央に揃える。

インライン要素の場合

インライン要素なので、高さは文字に依存する。
image.png

<!--上下中央にしたい要素達は同階層に-->
<p class="vertical-middle">まなちゃんは猫</p>
<p class="vertical-middle">まなちゃん<br><br>かわいい</p>
<p class="vertical-middle">まなちゃん<br><br>犬に似てる</p>

.vertical-middle{
  background: yellow; 
  display: inline-block; /* インライン要素にすることで横に回り込む */
  vertical-align: middle; /* 上下中央に寄せる */ 
}

参考:【HTML, CSS】vertical-alignの使い方を勘違いしていた... | ゼロから新潟

テーブルセル要素の場合

テーブルセルは、tableタグみたいなもの。なのでtableタグには効く。
image.png

<!-- テーブル要素にする -->
<div class="table">
  <!-- テーブル要素の子要素をテーブルセル要素にする -->
  <p class="vertical-middle">まなちゃんは猫</p>
  <p class="vertical-middle">まなちゃん<br><br>かわいい</p>
  <p class="vertical-middle">まなちゃん<br><br>犬に似てる</p>
</div>
.table{
  display: table; /* 親要素はテーブル要素にする  */
}
.vertical-middle{
  background: yellow; 
  display: table-cell; /* 子要素はテーブルセル要素にする */
  vertical-align: middle; /* 上下中央に寄せる */ 
}

上下左右中央揃え

position: absolute; + margin: auto;

widthとheightの指定が必須。
absoluteで絶対配置した要素の位置は0に指定。
image.png

<div class="body">
  <div class="position-absolute">
    <p>まなちゃんは猫</p>
  </div>
</div>
.body{
  background: lightgray;
  height: 200px;
  position: relative; /*中央揃えしたい要素の親要素に指定*/
}
.position-absolute{
  background: yellow;
  position: absolute;  /*要素を浮かす*/
  /*relativeを指定した親要素を支点とした位置をすべて0に指定↓*/
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto; /*上下左右中央に*/
  width: 100px; /*widthの指定は必須*/
  height: 100px; /*heightの指定は必須*/
}

なんでこれで真ん中いくのか永遠に謎であったが、magin: auto;の条件がうまくあれしてるらしい。

絶対配置(absolute)してる要素は、
高さと幅の指定のwidth、height、位置指定のleft、right、top、bottomがauto以外であること。
margin: auto;であること。
以上の条件がそろったとき、marginは等しい値になるよう計算されたものになるという仕様があり、これを満たそうとすることで中央揃えになっている。

参考:CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

position: absolute; + transform

幅や高さを指定できない要素にはこれ。
image.png

<div class="body">
  <div class="position-absolute">
    <p>まなちゃんは猫</p>
  </div>
</div>
.body{
  background: lightgray;
  height: 200px;
  position: relative;
}
.absolute_transform{
  background: yellow;
  position: absolute;
  top: 50%; /*親要素を起点に上から50%*/
  left: 50%;  /*親要素を起点に左から50%*/
  transform: translateY(-50%) translateX(-50%); /*要素の大きさの半分ずつを戻す*/
  -webkit-transform: translateY(-50%) translateX(-50%);
}

参考:CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

display: flex;

幅や高さを指定できない要素にはこれも。
親要素に指定して子要素を中央揃えに。
image.png

<div class="display-flex">
  <div class="manachan">
    <p>まなちゃんは猫</p>
  </div>
</div>
.display-flex{
  background: lightgray;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.manachan{
  background: yellow;
}

参考:CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

まとめ

上下左右中央揃えまとめたら結構頭がスッキリした。
個人的には、position: absolute; + transformが汎用的に使えて、とても良き。

下記のサイトがかなり詳しくわかりやすいです。ありがとうございます。
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
143
Help us understand the problem. What are the problem?