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

Question

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

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

问题: 有什么方法可以不使用Javascript调整第一个元素的边距来对齐两个元素？

<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>

Answer 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

Answer 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%。如果某人的滚动条和页面一样宽，他/她无论如何都无法使用该页面。

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

Horizontally centering two stacked divs, when one has a vertical scrollbar

html

css

scrollbar

centering

Revised Fiddle