css垂直对齐div同时保持边距

Question

我有这个html＆amp; css，它允许我将内容集中在容器中：

＆＃13;

＆＃13;

.container {
  height: 100vh;
  overflow: auto;
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这很有效，但是当我缩小浏览器窗口的高度使其变得比内容短时，内容框的顶部会上升并且不在视野范围内。我希望内容框总是有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

你可以给你的System.Data.SqlClient一个最大高度和溢出，这样就可以在里面滚动：

.content