※ これはネタ記事です。 実話を基にしたフィクションです。
CSSが得意なア●ミカ
ア●ミカ 「キツいことを言ってるように見えるんやろうけど、物事を悪く言うの苦手やねん」
大● 「あー... なんか悪口言ってるイメージはないな」
ア●ミカ 「モノのいいところを探さんと生きていかれへん人生やったから」
ア●ミカ 「Webサイトの良いところをHTML1個でも、Javascript1個でも探すのが好きなんよ」
ノ● 「ほな、CSSもほめれます？」
ア●ミカ 「... 上下左右中央揃えの方法って200種類あんねん」
ノ● 「上下左右中央揃えの方法って200種類はないやろ」
ア●ミカ 😄... 😀... 😫... 😱!!!
ア●ミカ 「そうやった... 上下左右中央揃えの方法って20種類やねん」
ア●ミカ 「推奨できない方法もあるから気ぃつけてな!」
上下左右中央揃えの方法
1. CSS Gridを使う方法 1
place-items: center;を使う方法
See the Pen Untitled by でぐぅー | Qiita (@sp_degu) on CodePen.
2. CSS Gridを使う方法 2
CSS Gridを使って、place-self: center;を使う方法
See the Pen 上下左右中央揃え５ by でぐぅー | Qiita (@sp_degu) on CodePen.
3. CSS Gridを使う方法 3
CSS Gridを使って、align-items: center;とjustify-items: center;を使う方法
See the Pen 上下左右中央揃え１ by でぐぅー | Qiita (@sp_degu) on CodePen.
4. CSS Gridを使う方法 4
CSS Gridを使って、align-content: center;とjustify-content: center;を使う方法
See the Pen 上下左右中央揃え２ by でぐぅー | Qiita (@sp_degu) on CodePen.
5. CSS Gridを使う方法 5
CSS Gridを使って、align-self: center;とjustify-self: center;を使う方法
See the Pen 上下左右中央揃え４ by でぐぅー | Qiita (@sp_degu) on CodePen.
6. CSS Gridを使う方法 6
CSS Gridを使って、align-items: center; と justify-content: center;を使う方法
See the Pen 上下左右中央揃え１２ by でぐぅー | Qiita (@sp_degu) on CodePen.
7. CSS Gridを使う方法 7
CSS Gridを使って、align-items: center; と justify-self: center;を使う方法
See the Pen 上下左右中央揃え１２ by でぐぅー | Qiita (@sp_degu) on CodePen.
8. CSS Gridを使う方法 8
CSS Gridを使って、align-content: center; と justify-items: center;を使う方法
See the Pen 上下左右中央揃え１３ by でぐぅー | Qiita (@sp_degu) on CodePen.
9. CSS Gridを使う方法 9
CSS Gridを使って、align-content: center; と justify-self: center;を使う方法
See the Pen 上下左右中央揃え１５ by でぐぅー | Qiita (@sp_degu) on CodePen.
10. CSS Gridを使う方法 10
CSS Gridを使って、align-self: center; と justify-items: center;を使う方法
See the Pen 上下左右中央揃え１６ by でぐぅー | Qiita (@sp_degu) on CodePen.
11. CSS Gridを使う方法 11
CSS Gridを使って、align-self: center; と justify-contents: center;を使う方法
See the Pen 上下左右中央揃え１６ by でぐぅー | Qiita (@sp_degu) on CodePen.
12. Flex boxを使う方法 1
Flex boxを使って、align-items: center; と justify-content: center;を使う方法
See the Pen 上下左右中央揃え６ by でぐぅー | Qiita (@sp_degu) on CodePen.
13. Flex boxを使う方法 2
Flex boxを使って、align-items: center; と justify-content: space-around;を使う方法
See the Pen 上下左右中央揃え１7 by でぐぅー | Qiita (@sp_degu) on CodePen.
14. Flex boxを使う方法 3
Flex boxを使って、align-items: center; と justify-content: space-evenly;を使う方法
See the Pen 上下左右中央揃え１8 by でぐぅー | Qiita (@sp_degu) on CodePen.
15. Flex boxを使う方法 4
Flex boxを使って、align-self: center; と justify-content: center;を使う方法
See the Pen 上下左右中央揃え７ by でぐぅー | Qiita (@sp_degu) on CodePen.
16. Flex boxを使う方法 5
Flex boxを使って、align-self: center; と justify-content: space-around;を使う方法
See the Pen 上下左右中央揃え20 by でぐぅー | Qiita (@sp_degu) on CodePen.
17. Flex boxを使う方法 6
Flex boxを使って、align-self: center; と justify-content: space-evenly;を使う方法
See the Pen 上下左右中央揃え21 by でぐぅー | Qiita (@sp_degu) on CodePen.
18. position: absolute;を使う方法
position: absolute;を使って、上下左右中央揃えする方法
See the Pen 上下左右中央揃え１０ by でぐぅー | Qiita (@sp_degu) on CodePen.
19. Table Layoutを使う方法
Table Layoutを使って、align-self: center; と justify-content: space-evenly;を使う方法
See the Pen 上下左右中央揃え１１ by でぐぅー | Qiita (@sp_degu) on CodePen.
20. marginとpaddingを使う方法
marginとpaddingの数値を固定して、上下左右中央揃えする方法
See the Pen 上下左右中央揃え８ by でぐぅー | Qiita (@sp_degu) on CodePen.
まとめ
(以下は、@degudegu2510の感想です)
「〇〇って2OØ種類あんねん」ってタイトルにしたかっただけだったので、
上下左右中央揃えだったら20種類くらいありそうだということで、上下左右中央揃えにしました。
ほぼ、Grid LayoutとFlex boxでしたね...
少しズルかったかもです。
DOMの構造は変えない・上下左右中央のテキストを上下左右中央揃え・できるだけ同じ見ためにする
など、自分なりに縛りを設けていますが、
他にもこういうやり方を思いついたり、気に入らないパターンがあれば、ぜひコメントください。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。