Question

我试图将DIV元素的内容居中，它的滚动条隐藏在父元素后面。看起来像这样：

HTML：

<div class="parent">
    <div class="child">
        <div class="content">
            This should be centered! This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!This should be centered!
        </div>
    </div>
</div>

CSS：

.parent {
  width: 300px; /* unknown width - 100%* - browser size */
  height: 200px; /* unknown width - 100%* - broser size */
  overflow: hidden;
  background: #dedede;
}
.child {
  width: 120%; 
  height: 100%;
  overflow-y: scroll;
  background: #000;
}
.content {
    width: 150px;
    margin: 0 auto;
    background: #fff;
}

我尝试过各种各样的东西，但似乎没什么用。

我希望跨浏览器完成此操作，如果用户重新调整窗口大小，它仍可正常工作。我的问题是不同浏览器中的滚动条宽度改变，并且屏幕宽度也是未知的。

Answer 1

在看了你的jsfiddle后，我发现了它没有居中的原因。您已将宽度设置为120％，如果将其更改为100％，则会将子div居中。但是，在执行此操作时，它确实会返回滚动条。我正在努力。

<强>更新

我知道你已经接受了答案，但如果你不想使用javascript / jquery并且只使用普通的css，那么你也可以尝试在css中使用它

.content {
    width: 150px;
    margin: 0 auto;
    background: #fff;
    -webkit-transform: translate(-20%, -20%);
    -moz-transform: translate(-20%, -20%);
    -ms-transform: translate(-20%, -20%);
    transform: translate(-20%, -20%);
}

Answer 2

以下是一种可以在所有浏览器中使用的方法。

按如下方式修改CSS：

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.parent {
    height: 100%;    /* unknown width - 100%* - browser size */
    overflow: hidden;
    background: #dedede;
}
.child {
    width: 120%;
    height: 100%;
    overflow-y: scroll;
    background: #000;
    position: relative;
}
.content {
    background: #fff;
    width: 150px;
    position: absolute;
    left: 45%;
    margin-left: -75px;
}

在position: relative块上设置.child，然后在position: absolute块上使用.content。

要使居中工作，请使用left: 45%，然后使用.content将margin-left: -75px向左移动。

45％的值是基于一些试验和错误。

<强>限制

如果缩小窗口宽度足够小，您会发现.content周围的左右间距不是很对称（关闭2-3个像素）。

如果窗口足够高，内容将无法到达屏幕底部，因此不会垂直居中。

浏览器支持＆amp; Safari Quirk 我在Windows中尝试使用Safari的解决方案，并且使用鼠标滚动垂直滚动不起作用。但是，该解决方案适用于FF，IE，Chrome，Opera（最新版本）。

演示小提琴：http://jsfiddle.net/audetwebdesign/q3bKz/

如何在隐藏它的滚动条的同时居中DIV？

2 个答案: