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

Question

我想让“Shadow” div 在“Wrapper”内水平居中。由于 width: 100% 导致“Wrapper”的具体宽度未知，因此“Shadow” 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。