CSS:上下中央揃えはflexを使おう。

〽️ コード3行でできるよ。






余白を駆使していたあの頃。

こんにちは。「ふ」です。

CSSを使った要素の左右中央揃えは簡単ですよね。

text-align:center;
margin: 0 auto;

このへんを使えばすぐにできます。

一方、垂直方向のセンタリングはどうですか?
「ふ」もそうでしたが、marginなどの余白やpositionプロパティを駆使して調整していました。これまでは。

でも、

便利なのがあった。

flexboxを使えば、上下左右に手軽に中央揃えにできることを知ったので紹介します。早く言ってよ、ですね。



実装していきましょう。

まずは要素を配置してみます。CSSでテキトーに高さと背景色をつけておきました。

HTML

CSS

.area { background-color:aqua; height:50vw; }

ブラウザ




ここに以下のCSSを追加。

CSS

.area { 「「3background-color:aqua; height:50vw; width:100vw;」」 「「1//追加 display:flex; align-items:center; justify-content:center;」」 }


おわり。







あれこれと苦悩の末に活路を見い出し目的を達成するタイプの方は、すいません、こんだけです。


「area」の中に何か書いてみます。

HTML

「「1何か。」」

ブラウザ

はい、上下左右にセンタリングできました。
検証を深めるべく、次は画像を置いてみますか。

HTML

「「1」」

ブラウザ

はい。

〜こんな感じで、親要素のCSSに3行のコードを追加するだけで、その内部に記述されたものが上下左右に中央揃えさせることができるんですね ♪

とは言え、折角このページを訪問していただいた(ありがとうございます!)方には理解を深めていただきたいので、次のセクションでプロパティの解説をさせてもらいます。



解説。



jistify-content:center;

flex化したことで、親要素には子要素を配置するための「主軸」が決定されます。
デフォルト値は水平方向になりますね。この主軸に対して子要素をどのように配置するか設定するのが「justify-content」プロパティです。
水平軸に対して「center」、つまり中央寄せにすれば結果的に子要素が上下中央揃いに配置されます。

CSS

align-items:center;


「align-items」プロパティで、主軸に対する「交差軸」方向の配置を設定できます。「center」にすることで今度は左右中央寄せができるわけですね。



軸に合わせる。

flexボックスを使った要素の上下左右中央寄せ。とても簡単にできてしまいました。
この方法を知る前は子要素の外側(margin,paddingなど)を調整することばかり考えていましたが、「軸」に合わせるという逆の発想。感銘。

今後どんどん使っていきたいと思います。













「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧