Question

我有一个DIV，我需要保持在页面中心，即使页面被重新调整大小。

我目前通过顶级实现了这一目标：50％; left：50％，左上边距等于DIV尺寸的一半，如下所示：

.centered {
  width: 500px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -100px;
}

但是，当页面小于500x200时，div的左侧会被切断，并且没有滚动条可以看到它的内容。

DEMO

如何添加滚动条以便您可以看到所有DIV的内容？

由于

Answer 1

由于您的元素有position : absolute，因此它会从正常的页面呈现流程中删除，因此无法在没有JavaScript的情况下添加滚动条。

Answer 2

您可以简单地使用css媒体查询特定的宽度和高度 Demo

   .centered {
    width: 500px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -100px;
    background-color: blue;
    color: white;
}
@media screen and (max-width: 510px) , screen and (max-height:210px) {
    .centered {
        position: relative;
        left: 0;
        top: 0;
        margin: 0;
    }

答案已更新

Answer 3

.centered {
    width: 500px;
    height: 200px;
    position: absolute;
    top:calc(50% - 250px);
    left:calc(50% - 100px);
}

希望这有帮助！此示例确实需要CSS3，因此请在Chrome或Safari中使用它以获得最佳效果。如果您使用的是LESS编译器，则必须将其更改为：

.centered {
    width: 500px;
    height: 200px;
    position: absolute;
    top:calc(~"50% - 250px");
    left:calc(~"50% - 100px");
}

Answer 4

尝试在height

中设置%

＆＃13;

* {
  margin: 0;
  padding: 0;
}
.centered {
  width: 500px;
  max-height: 200px;
  height: 40%;
  background-color: blue;
  color: white;
  vertical-align: middle;
  overflow: auto;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  bottom: 50%;
  left: 50%;
}

＆＃13;

<div class="centered">This is the div that needs to be centered This is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis
  is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is
  the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the
  div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div
  that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that
  needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs
  to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to be centeredThis is the div that needs to
  be centeredThis is the div that needs to be centeredThis is the div that needs to be centered</div>

＆＃13;

使DIV保持在中心，但在页面调整大小时使用滚动条

4 个答案: