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

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


#左右中央揃え
## text-align: center;

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/cda2789e-8317-e3fd-893f-33a685ca0a50.png)

```html
<p class="text-center">まなちゃんは猫</p>
```

```css
.text-center{
  text-align: center;
}
```

参考：[text\-align:centerが効かない！text\-alignは何に効くCSSかNatsuMemo ナツメモ](https://natsukimemo.com/css-text-align)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/d42bc6db-1934-daf6-f215-d61509cf16aa.png)

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

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


参考：[CSSで要素を上下や左右から中央寄せする7つの方法 \| 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/centering-by-css)



#上下中央揃え
##vertical-align: middle;
**同じ階層にあるインライン要素**、また**テーブルセル**を、上下中央に揃える。

###インライン要素の場合
インライン要素なので、高さは文字に依存する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/d5d08fba-e072-31b3-8301-30c05858f89c.png)

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

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

参考：[【HTML, CSS】vertical\-alignの使い方を勘違いしていた\.\.\. \| ゼロから新潟](https://niigata-ijyuu-bohzoo.com/method-of-vertical-align/)

###テーブルセル要素の場合
テーブルセルは、tableタグみたいなもの。なのでtableタグには効く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/43725585-8dcb-e812-798a-e5abf7d00649.png)

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

#上下左右中央揃え
##position: absolute; + margin: auto;
**widthとheightの指定が必須。**
absoluteで絶対配置した要素の位置は`0`に指定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/333513ce-d18c-16b0-21b7-5d5d4445a0af.png)

```html
<div class="body">
  <div class="position-absolute">
    <p>まなちゃんは猫</p>
  </div>
</div>
```
```css
.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つの方法 \| 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/centering-by-css)


##position: absolute; + transform

**幅や高さを指定できない要素**にはこれ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/1383b03a-0c1e-6050-e10e-f27a7ceb2c32.png)

```html
<div class="body">
  <div class="position-absolute">
    <p>まなちゃんは猫</p>
  </div>
</div>
```
```css
.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つの方法 \| 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/centering-by-css)
##display: flex;

**幅や高さを指定できない要素**にはこれも。
親要素に指定して子要素を中央揃えに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304162/1383b03a-0c1e-6050-e10e-f27a7ceb2c32.png)

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

```
参考：[CSSで要素を上下や左右から中央寄せする7つの方法 \| 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/centering-by-css)

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

下記のサイトがかなり詳しくわかりやすいです。ありがとうございます。
[CSSで要素を上下や左右から中央寄せする7つの方法 \| 株式会社グランフェアズ](https://www.granfairs.com/blog/staff/centering-by-css)