CSS
fixed
flexbox

Flexboxを用いて高さ指定、jQuery不要で画面中央固定表示する方法

スタイルシートで画面のちょうど中央に要素を固定表示しようとすると、


  • 要素の高さを予め指定する

  • jQueryで要素の高さを動的に取得する

  • translateを使う

必要があります。

参考:

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

しかし、親要素にFlexboxを使うことで、高さ指定、jQuery不要で画面の中央に固定して表示することが出来るようになります。

.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;
}

デモ

https://jsfiddle.net/Monoxa/85dpqshe/7/