【CSS】FlexboxとPositon:Fixedを使って要素を中央固定表示する方法

作成日： 2018年8月23日
📝 はじめに 本記事はBootstrapの使用をベースにしています。

CSSである要素を中央に固定して表示するには、表示したい要素の高さ分をtopから差し引く、という方法が良く用いられます。

しかし、これは要素の高さを予め決定しておく必要があります。

もし高さが可変する場合はjQueryを使って、動的に要素の高さを取得してtopから差し引く、ということをします。

css position:fixedで縦横中央に要素を配置する - Qiita https://qiita.com/aosho235/items/33faecdae4d9ca128e5c

translateを使う方法 position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 元記事はこちら： http://stackover...

でもjQueryを使うのもスマートでない。

CSSだけで
実現できない
かな？

そこで思い立ったのは、Flexboxのalign-items: center;を使えば、高さを指定しなくても中央に表示出来るのでは無いかと。

早速試してみたら、いい感じになりました。

サンプルコード

See the Pen FlexboxとPosition: Fixedで中央固定表示 by JaSTIN (@JaSTIN) on CodePen.

ポイントとしては、固定表示させる親要素と表示用の子要素に分けて、親要素のdisplayをflexにして高さを100%に伸ばし、さらにalign-itemsをcenterとして、子要素を中央表示するように設定します。

CSS 
.fixed-right-center{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

ただ、それだと固定表示が高さいっぱいまで広がって背面を選択することが出来なくなりますので、親要素にpointer-events: none;を、子要素にpointer-events: auto;を追記して重なりを無効化します。

CSS 
.fixed-right-center{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.fixed-right-center > *{
  pointer-events: auto;
}

これで、「 高さ可変 」かつ「 jQuery不要 」で中央表示出来るようになりました。

物草 灸太郎

WordPressでホームページを制作しつつ、休日は畑を耕したりDIYを楽しんでいます。

⬅ 前の記事
Bootstrapの変数を自分のSCSS（SASS）で使う方法
次の記事 ➡
WordPressで投稿ループの中に倍数もしくは固定で広告を挿入する。

関連投稿

コメントをどうぞ

  • メールアドレスが公開されることはありません。
  • コメント欄にURLは入力できません。
  • このサイトはreCAPTCHAによって保護されており、Googleのプライバシーポリシーと利用規約が適用されます。