ホーム > ブログ > HTML > HTMLで文字を上下左右中央に配置したい！
なんか適当にあげるチャンネルのブログ 更新日：2021/12/20
HTMLで文字を上下左右中央に配置したい！！
お久しぶりのブログです。
どうもみなさんこんにちは。
現在、ブログのヘッダーの<style>をなくすべくがんばっているなんか適当にあげるチャンネルです。
今回は、HTMLのことに関してです。
突然ですが、Webを開発している皆さん、文字を上下左右中央に配置したい！となったことはありませんか？
Officeなら、
こんな風に簡単にできるのに...
HTMLなら、そんな簡単にできない！！
今回は、それを開発していきたいと思います。
まずは、class="center"を指定しているタグのためのCSSを書いていきましょう。
まずは、こちらのCSSを適用させます。
CSS
.center {見た感じ、( ﾟДﾟ)ﾊｧ? ですが、これからこのCSSの意味を見ていきましょう！
１.絶対配置とは…? ▲目次へ
まず、１行目の、position: absolute;。
これは、絶対配置というものを設定してあり、ページの端からどれだけかということを、設定してあります。
ここまでの成果
２.移動させよう。 ▲目次へ
続いて、２，３行目の、top・left: 50%;。
これは、ページの端から画面50%分、右下に移動してや～、って事です。
position: absolute;の時に結構使います。
シンプルですしね。
でも、上の図を見てみて、何か思いませんでしたか？
そうです。
このままだと、コンテンツの左上の端が真ん中に来ただけですから。
本当に欲しいのは、コンテンツの真ん中が、画面の真ん中に来てほしいんですよね～。
３.やっと真ん中になった！ ▲目次へ
やっと最後の、transform: translate(-50%,-50%);。
今まではまだ直感的に理解できたのに、なんでかっこが中に入ってるんや、と。
まずは、transformから。
transformは、コンテンツを拡大縮小・傾斜・移動させることができるプロパティです。
みんな大好きMDNのDocsから。
続いて、translateは、コンテンツを移動させるプロパティです。
んで、translate(-50%,-50%)の、この-50%,-50%は何かというと、
コンテンツのサイズの50%、つまり、半分の長さです。
で、50%だと、半分の長さだけ遠ざかってしまうので、-50%で、コンテンツの長さの半分だけ左・上に戻しています。
ここら辺は、言葉だと分かりにくいので、
↓こちらをご覧ください。
で、最後のほうを見てみると...
おっ （ ＾ω＾）。なんか良さげですね。
つまり、HTMLで上下左右中央に配置するには、
１.絶対配置で好きなところに表示できるようにする
２.左上の角を真ん中に持ってくる
３.コンテンツの半分の長さの分だけ引く
ということをすると、上下左右中央に配置できるんですね～！
というか、文字だけなら、text-align: center;で配置できるので、leftはいらないのですが、
ほかのコンテンツはtext-alignには引っかからないので、全てこの方法で統一が良さげかな～、と思います。
４.flexでやる場合(推奨?)
ほかの方のページを見ていて、この中央揃えはどうやってやっているんだろうと思い、見てみた結果
Flexが使われていました。
確かにflexって中央揃えにできるとかなんとかっていうのは聞いていたので、
どうやっているのかを解説していきます。
１.コード
まずはコードをご紹介します。
HTML
<div class="contents-wrapper flex-wrapper flex-center">CSS
.contents-wrapper {最後までお読みいただきありがとうございました！
また、更新情報などありましたら、加筆していきます(^^♪
以上、最初のHTMLブログでした！
