css垂直對齊div，同時保持邊距

Question

我有這個 html & css，它允許我將我的內容放在容器內：

 .container { height: 100vh; overflow: auto; position: relative; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

 <div class="container"> <div class="content"></div> </div>

這很好用，但是當我降低瀏覽器窗口的高度使其比內容短時，內容框的頂部會上升並消失在視野中。 我希望內容框始終具有 20px 的頂部和底部邊距。 是否可以單獨使用 css 來實現這一點？ 謝謝。

Answer 1

這就是您無需太多代碼即可做到的方法

https://codepen.io/bhupinderkumarbl/pen/WXQxam

 .container{ height: 100vh; display:flex; justify-content:center; flex-direction:column; text-align:center } h1{ margin:0}

Answer 2

你可以給你的.content一個最大高度和溢出，這樣就可以在里面滾動：

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 100vh;
    overflow: auto;
}