JSを使わずにCSSだけで要素をページの真ん中に配置するという方法はいろいろある。 けど、その要素の中身の高さが、親の高さを超えてしまうと、その上部分が見切れてしまうというパターンが多い。 そういう場合はJSを使って位置を調整することが多いけど、CSSだけで解決できそうな気がしたのでやってみた。 .center { position: fixed; right: 50%; bottom: 50%; width: calc(100% - 20px); max-width: 600px; max-height: calc(100% - 20px); overflow-y: auto; transform: translate(50%,50%); } Element in the vertical center where you can scroll これで、.centerの中身が少ないときは