垂直和水平居中内容，浏览器不允许滚动。

Question

我正在使用以下CSS来使我的内容在垂直和水平方向上居中；问题是，当你缩小浏览器窗口大小小于内容的

时，它仍然保持居中但无法滚动。内容只会从顶部截断。

#splash-centre-container{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 550px;
  width: 760px;
  min-height: 550px;
  padding: 20px;
  margin: -310px 0 0 -400px;
}

- Adam

Answer 1

这是因为当您将某个元素定位为absolute时，它会脱离页面的流动性，不会“占用空间”。

您需要将min-width和min-height应用于body（或其容器），以便当屏幕变得太小时，闪屏屏幕所在的元素永远不会变小于闪屏屏幕，因此不会超出屏幕。

jsFiddle

HTML

<div class="spacer">
    <div id="splash-centre-container">abc</div>
</div>

CSS

html, body { 
    min-width:760px;
    height:100%;
    min-height:550px;
    position:relative;
}
#splash-centre-container {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 550px;
    width: 760px;
    margin: -275px 0 0 -380px;
    background-color:red;
}

- Daniel Imms

---

我花了一段时间才让演示开始运行:P - Daniel Imms

@Adam，这怎么垂直居中？刚才你不是让我垂直居中吗？ - btevfik

问题在于当屏幕尺寸变得太小时，居中的启动画面会超出屏幕。在我的截图中它仍然是居中的，只是向左滚动了。 - Daniel Imms

@Tyriar 我以为他是在问我有什么。将 div 居中放置在页面中央。 - btevfik

Answer 2

您可以像这样做。

#splash-centre-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  position: absolute;
  overflow: auto;
  border: solid black 2px;
}

http://jsfiddle.net/btevfik/XMNTM/

- btevfik

---

我认为这不会使其垂直居中。 - Adam

那么我想你想要这样的东西。 - btevfik

Answer 3

Chris Coyier在2009年这里发布了我能找到的最佳解决方案。我认为它是最好的，因为它可以垂直和水平地居中内容，并且允许动态高度（其他答案依赖于固定高度，这是不必要的限制），并且可以在较小的屏幕上滚动。这非常适合创建替换模态弹出窗口的居中内联表单。

我清理并将该代码转换为Sass mixin，以便您可以轻松自定义表单宽度（提示：将表单元素CSS和相关变量添加到Sass mixin中，因为您的表单元素宽度将受限于居中的内联表单中）。

jsFiddle

SCSS

html,
body,
form {
  height: 100%;
  margin: 0;
  padding: 0;
}

@mixin CenteredInlineForm( $ContainerSetName, $formWidth) {
  div.#{$ContainerSetName}_CenteredForm {
    display: table;
    overflow: hidden;
    margin: 0 auto;
    height: 100%;
    width: #{($formWidth + 15)}px;
    div.#{$ContainerSetName}_CenteredFormContentContainer {
      display: table-cell;
      vertical-align: middle;
      div.#{$ContainerSetName}_CenteredFormContent {
        background-color: lightgrey;
        border: 3px solid darkgrey;
        border-radius: 15px;
        padding: 15px;
      }
    }
  }
  *:first-child + html div.#{$ContainerSetName}_CenteredForm {
    position: relative;
  }
  /*ie6 Support: */
  /* * html div.#{$ContainerSetName}_CenteredForm{position:relative;} */
  *:first-child + html div.#{$ContainerSetName}_CenteredFormContentContainer {
    position: absolute;
    top: 50%;
  }
  /*ie6 Only: */
  /* * html div.#{$ContainerSetName}_CenteredFormContentContainer{position:absolute;top:50%;} */
  *:first-child + html div.#{$ContainerSetName}_CenteredFormContent {
    position: relative;
    top: -50%;
  }
}

@include CenteredInlineForm(UserInfoInput, 400);

HTML

<div class="UserInfoInput_CenteredForm">
  <div class="UserInfoInput_CenteredFormContentContainer">
    <div class="UserInfoInput_CenteredFormContent">
      <p>
        Content or form labels/inputs
      </p>
      ...
    </div>
  </div>
</div>

- lightmotive