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

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


開発

CSSである要素を中央に固定して表示するには、表示したい要素の高さ分をtopから差し引く、という方法が良く用いられます。
しかし、これは要素の高さを予め決定しておく必要があります。
もし高さが可変する場合はjQueryを使って、動的に要素の高さを取得してtopから差し引く、ということをします。

css position:fixedで縦横中央に要素を配置する - Qiita
参考
css position:fixedで縦横中央に要素を配置する - Qiita

## `translate`を使う方法 ```css position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` 元記事はこちら: htt...

Qiita

でもjQueryを使うのもスマートでない気がして、CSSだけで何とかしたいところ。

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


※ フレームワークとしてbootstrapを使っています。

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

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

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

.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不要」で中央表示出来るようになりました。

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

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


開発

CSSである要素を中央に固定して表示するには、表示したい要素の高さ分をtopから差し引く、という方法が良く用いられます。 しかし、これは要素の高さを予め決定しておく必要があります。 もし高さが可変する場合はjQueryを…


関連する記事



こちらはいかが?


Bootstrapの変数を自分のSCSS(SASS)で使う方法
Bootstrapの変数を自分のSCSS(SASS)で使う方法

bootstrapのソースファイルを一括ダウンロードすると、その中には複数のscssファイルが格納されています。 通常、bootstrapの色や幅などの数値を変更するにはその中にある _variables.scss の中…

コメントを残す