（大）div 在较小的 div 内水平居中。纯 CSS 解决方案可能吗？

Question

我想让“Shadow” div 在“Wrapper”内水平居中。 由于“Wrapper”的具体宽度由于 width: 100% 而未知，所以也不知道是否“影子” div 大于或小于其容器。

这甚至可能吗？我想不出任何解决办法。自动边距不起作用。 请仅使用 CSS 和 HTML。

演示代码：

HTML：

<div class="Wrapper">
  <div class="Shadow">some content</div>
  <div class="Content">some content</div>
</div>

CSS：

.Wrapper{ width: 100%; height: 100%; position: relative; background: url(path) top center no-repeat; max-width: 1520px; max-height: 1050px; overflow: hidden; }
.Shadow{ width: 1520px; height: 1050px; }
.Content{ position:absolute; top: 20px; left: 20px; width: 800px; height: 500px; }

Answer 1

你可以试试这样的：DEMO

您使用margin-left: 50% 将子级移动到包装器的中心，然后使用left 将子级向左移动一半宽度。

我的示例中的相关 CSS 行：

.wrapper {
    position:relative;
    /* other properties */
}
.shadow {
    position: absolute;
    margin-left: 50%;
    width: 400px;
    left: -200px;
    /* other properties */
}

或者：

您可以使用transform:translate(-760px); 代替left - 那么您不需要绝对定位阴影元素，请参阅DEMO。