【CSS】上下左右中央揃えの方法って2OØ種類あんねん

※ これはネタ記事です。 実話を基にしたフィクションです。


## CSSが得意なア●ミカ

ア●ミカ 「キツいことを言ってるように見えるんやろうけど、物事を悪く言うの苦手やねん」
 　　大● 「あー... なんか悪口言ってるイメージはないな」
ア●ミカ 「モノのいいところを探さんと生きていかれへん人生やったから」
ア●ミカ 「Webサイトの良いところをHTML1個でも、Javascript1個でも探すのが好きなんよ」
 　　ノ●  「ほな、CSSもほめれます？」
ア●ミカ 「... 上下左右中央揃えの方法って200種類あんねん」
 　　ノ●  「上下左右中央揃えの方法って200種類はないやろ」

ア●ミカ　😄...　😀...　😫...　😱!!!
ア●ミカ 「そうやった... 上下左右中央揃えの方法って20種類やねん」
ア●ミカ 「推奨できない方法もあるから気ぃつけてな!」


## 上下左右中央揃えの方法
### 1. CSS Gridを使う方法 1
`place-items: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="mdXZOQE" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/mdXZOQE">
  Untitled</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 2. CSS Gridを使う方法 2
CSS Gridを使って、`place-self: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="YzeoNwG" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/YzeoNwG">
  上下左右中央揃え５</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 3. CSS Gridを使う方法 3
CSS Gridを使って、`align-items: center;`と`justify-items: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGLPBPY" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/bGLPBPY">
  上下左右中央揃え１</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />





 
### 4. CSS Gridを使う方法 4
CSS Gridを使って、`align-content: center;`と`justify-content: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="NWyZdqY" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/NWyZdqY">
  上下左右中央揃え２</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 5. CSS Gridを使う方法 5
CSS Gridを使って、`align-self: center;`と`justify-self: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="yLvdgYQ" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/yLvdgYQ">
  上下左右中央揃え４</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 6. CSS Gridを使う方法 6
CSS Gridを使って、`align-items: center;` と `justify-content: center;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="LYQKWxe" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/LYQKWxe">
  上下左右中央揃え１２</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 7. CSS Gridを使う方法 7
CSS Gridを使って、`align-items: center;` と `justify-self: center;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="jOZjBLP" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/jOZjBLP">
  上下左右中央揃え１２</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 8. CSS Gridを使う方法 8
CSS Gridを使って、`align-content: center;` と `justify-items: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ExQBWQw" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ExQBWQw">
  上下左右中央揃え１３</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 9. CSS Gridを使う方法 9
CSS Gridを使って、`align-content: center;` と `justify-self: center;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="dydBvmj" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/dydBvmj">
  上下左右中央揃え１５</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 10. CSS Gridを使う方法 10
CSS Gridを使って、`align-self: center;` と `justify-items: center;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwQJNjy" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/VwQJNjy">
  上下左右中央揃え１６</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />





 
### 11. CSS Gridを使う方法 11
CSS Gridを使って、`align-self: center;` と `justify-contents: center;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="ZErdZop" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/ZErdZop">
  上下左右中央揃え１６</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />





 
### 12. Flex boxを使う方法 1
Flex boxを使って、`align-items: center;` と `justify-content: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="RwQzKKV" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/RwQzKKV">
  上下左右中央揃え６</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 13. Flex boxを使う方法 2

Flex boxを使って、`align-items: center;` と `justify-content: space-around;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="xxYoNKj" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/xxYoNKj">
  上下左右中央揃え１7</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 14. Flex boxを使う方法 3

Flex boxを使って、`align-items: center;` と `justify-content: space-evenly;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="wvyLbBa" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/wvyLbBa">
  上下左右中央揃え１8</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 15. Flex boxを使う方法　4
Flex boxを使って、`align-self: center;` と `justify-content: center;`を使う方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="gOvNgGo" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/gOvNgGo">
  上下左右中央揃え７</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 16. Flex boxを使う方法　5
Flex boxを使って、`align-self: center;` と `justify-content: space-around;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="MWQMdyv" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/MWQMdyv">
  上下左右中央揃え20</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />






### 17. Flex boxを使う方法 6
Flex boxを使って、`align-self: center;` と `justify-content: space-evenly;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGLPyep" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/bGLPyep">
  上下左右中央揃え21</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />





### 18. `position: absolute;`を使う方法
`position: absolute;`を使って、上下左右中央揃えする方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="VwQJpvQ" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/VwQJpvQ">
  上下左右中央揃え１０</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />







### 19. Table Layoutを使う方法
Table Layoutを使って、`align-self: center;` と `justify-content: space-evenly;`を使う方法
<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="bGLPqpy" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/bGLPqpy">
  上下左右中央揃え１１</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />










### 20. marginとpaddingを使う方法
 marginとpaddingの数値を固定して、上下左右中央揃えする方法

<p class="codepen" data-height="300" data-default-tab="css,result" data-slug-hash="xxYogWV" data-editable="true" data-user="sp_degu" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sp_degu/pen/xxYogWV">
  上下左右中央揃え８</a> by でぐぅー | Qiita (<a href="https://codepen.io/sp_degu">@sp_degu</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<br />



## まとめ
(以下は、@degudegu2510の感想です)

「〇〇って2OØ種類あんねん」ってタイトルにしたかっただけだったので、
上下左右中央揃えだったら20種類くらいありそうだということで、上下左右中央揃えにしました。

ほぼ、Grid LayoutとFlex boxでしたね...
少しズルかったかもです。


`DOMの構造は変えない`・`上下左右中央のテキストを上下左右中央揃え`・`できるだけ同じ見ためにする`
など、自分なりに縛りを設けていますが、

他にもこういうやり方を思いついたり、気に入らないパターンがあれば、ぜひコメントください。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510