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

Posted

技术标签:

【中文标题】垂直和水平居中内容,浏览器不允许滚动【英文标题】:Centering content vertically and horizontally, the browser doesn't allow scrolling 【发布时间】:2013-03-13 20:24:53 【问题描述】:

我正在使用以下 css 将我的内容垂直和水平居中;问题是当您最小化浏览器以使其小于内容div 时,它会继续居中但无法滚动。内容只是在顶部截断。

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

【问题讨论】:

【参考方案1】:

这是因为当您将某些内容定位为 absolute 时,您会将其从页面流中拉出,它不会“占用空间”。

您希望将min-widthmin-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;

【讨论】:

谢谢。正是我想要的。 花了我一段时间才开始演示:P @Adam 如何垂直居中?你不是让我把它垂直居中吗? @btevfik 问题是当屏幕尺寸变得太小时,居中的初始屏幕会离开屏幕。它仍然在我的屏幕截图中居中,只是向左滚动。 @Tyriar 我以为他在问我有什么。将 div 置于页面中间【参考方案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/

【讨论】:

我不认为它垂直居中。 那么我想你想要这样的东西【参考方案3】:

Chris Coyier 发布了我能找到的最佳解决方案 here in 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_CenteredFormposition:relative; */
  *:first-child + html div.#$ContainerSetName_CenteredFormContentContainer 
    position: absolute;
    top: 50%;
  
  /*ie6 Only: */
  /* * html div.#$ContainerSetName_CenteredFormContentContainerposition: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>

【讨论】:

以上是关于垂直和水平居中内容,浏览器不允许滚动的主要内容,如果未能解决你的问题,请参考以下文章

JS让任意图片垂直水平居中且页面不滚动

实现div内容水平垂直居中

CSS水平居中与垂直居中的总结

盒子在浏览器中水平垂直居中

在word文档中怎么把文字设置成水平与垂直居中?

怎样让div的内容水平垂直居中