html - 以页面为中心的 div 的安全内容

Question

我将我的所有内容放入一个带有 class="wrapper"的部分。该版 block 有设定的宽高，必须满足以下条件:

1. 水平和垂直放置在页面中间。如果窗口大小大于 <section>本身，那么这个元素必须自动居中。

2. 同时，如果窗口尺寸小于<section>尺寸，<section>应该是完全可滚动的，所有元素都应该是可见的。

我对第 2 部分有疑问，因为当我缩小窗口尺寸时，<section> 的上下边框实际上消失在屏幕和内容后面。顶部内容似乎被垂直调整大小“吃掉”了。左右边框不会发生这种情况，我仍然可以通过滚动查看完整内容。

所描述的问题适用于 Safari、Chrome 和 Opera，但不适用于 Firefox。我没有在 IE 中测试过。

我用它来垂直和水平居中:

.wrapper{
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;  
    height: 660px;
    width: 1200px;
    border: 1px dotted yellow;
}

显然，如果我使用下面的方法，那么它在 Safari 中也不起作用，因为 <section>调整大小时移到视口(viewport)后面:

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%; 
    margin-top: -330px; /* half of  height */
    margin-left: -600px;  /* half of width */
    height: 660px;
    width: 1200px;
    border: 1px dotted yellow;
}

我们将不胜感激有关如何适应该部分所有内容的任何建议!

Answer 1

https://jsfiddle.net/ahmadasjad/kemzkopm/13/

---

HTML 部分:

<div class="parent">
  <div class="child">
    <section class="wrapper">
        Wrapper Section
    </section>
  </div>    
</div>

---

CSS 部分:

.wrapper{
    margin: 0 auto;  
    height: 100px;
    width: 400px;
    max-width:100%;
    border: 1px dotted red;

}
.child{
    vertical-align:middle;
    display:table-cell;
}
.parent{
    display:table;
    height:100vh;
    width:100%;
}