当一个具有垂直滚动条时，水平居中两个堆叠的 div答案

【问题标题】：Horizontally centering two stacked divs, when one has a vertical scrollbar当一个具有垂直滚动条时，水平居中两个堆叠的 div
【发布时间】：2016-08-20 18:52:31
【问题描述】：

使用margin: 0 auto; 使元素水平居中很容易

但是，如果有两个元素堆叠在一列中并且一个有滚动条而另一个没有滚动条，则它不起作用。在这种情况下，两个水平居中的元素不再对齐。

问题：有没有什么方法可以在不使用Javascript调整第一个元素的边距的情况下对齐两个元素？

JSFIDDLE DEMO

<head>
  <style>
    body {
      margin: 0; height: 100vh;
    }

    .header {
      height: 50px; background: red;
    }

    .content {
      overflow-y: scroll; background: blue;
    }

    .inner {
      background: rgba(255,255,255,.5); max-width: 300px;
      margin: 0 auto; min-height: 50px;
    }

    .content > .inner {
      min-height: 300px;
    }
  </style>
</head>
<body>
  <div class="header">
    <div class="inner"></div>
  </div>

  <div class="content">
    <div class="inner"></div>
  </div>
</body>

【问题讨论】：

为什么不这样做呢？ jsfiddle.net/904umrhy/2
滚动条宽度取决于操作系统/浏览器，因此您的解决方案适用于您的浏览器，但doesn't correctly align for me。对于 OS X 用户来说，这更是一个问题，因为滚动条覆盖在那里。
那么为什么不使用Javascript呢？您不需要完整的 JQuery 库，只需简单的 javascript。
Javascript 只是一种解决方法，没有解决方案。这是我想使用的最后一件事，在我可能切换到固定标题之前。正如 Wes 在聊天中指出的那样，仅使用 CSS 完全有可能。我把它发布为答案，因为他太懒了。
考虑到你的回答没有居中，感觉你的回答也无解，见fiddlejsfiddle.net/904umrhy/5

标签： html css scrollbar centering

【解决方案1】：

主要问题显然是居中。那么为什么不绕过它并使用margin-left呢？

试试这个 CSS：

.inner { margin-left: calc(50vw - 150px); }  /* half viewport width less half element width 
                                                (for precise centering) */

body {
  margin: 0;
  height: 100vh;
}

.header {
  height: 50px;
  background: red;
}

.content {
  background: blue;
  overflow-y: scroll;
}

.inner {
  background: rgba(255,255,255,.5);
  max-width: 300px;
  /* margin: 0 auto;                   <-- remove */
  margin-left: calc(50vw - 150px);     /* new */
  min-height: 50px;
}

.content > .inner {
  min-height: 300px;
}

<div class="header">
  <div class="inner"></div>
</div>

<div class="content">
  <div class="inner"></div>
</div>

Revised Fiddle

【讨论】：

【解决方案2】：

Answer from Wes in chat:

这可以通过在第一个滚动条上添加滚动条来解决，但对用户隐藏它。

.header {
  height: 50px;
  background: red;
  overflow-y: scroll;
  width: 120%;
  margin-left: -10%;
}

JSFIDDLE DEMO

如果您担心用户的滚动条宽度可能超过 10%，请将其增大 width: 300% 和 margin-left: -100%。如果某人的滚动条与页面一样宽，那么他/她无论如何都不能使用该页面。

【讨论】：

这不是居中的，见例子。 jsfiddle.net/904umrhy/5 对齐但未居中。
@AdamBuchananSmith 它没有以视口为中心，但下方的白框在其父级中居中，而另一个上方的白框则正确对齐。