Question

我将所有内容放入带有class =＆＃34;包装器＆＃34;的部分中。此部分具有设定的宽度和高度，并且必须满足以下条件：

水平和垂直放置在页面中间。如果窗口大小大于<section>本身，则此元素必须自动居中。
同时，如果窗口大小小于<section>大小，<section>应该完全可滚动，并且所有元素都应该是可见的。

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

所述问题适用于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>在调整大小时落后于视口：

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

保护以页面为中心的div的内容

1 个答案:

HTML部分：

CSS部分：