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

15858 ワード
HTML5 CSS3 上下左右中央揃え HTML5 テキストリンク

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

左右中央揃え

text-align: center;

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

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

<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以上は大きくならない指定になる。

<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;

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

インライン要素の場合

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

<!--上下中央にしたい要素達は同階層に-->
<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タグには効く。

<!-- テーブル要素にする -->
<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に指定。

<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

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

<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;

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

<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つの方法 | 株式会社グランフェアズ