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

Question

I would like to have the "Shadow" div centered horizontally inside "Wrapper". Since the specific width of the "Wrapper" is unknown due to width: 100%, it is also unknown whether the "Shadow" div is larger or smaller than its container.

Is this even possible? I could not think of any solution. Auto margin doesnt work. CSS&HTML only please .

Code for demonstration:

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

You could try something like this: DEMO

where you use margin-left: 50% to move the child to the center of the wrapper and then using left to move the child left for half of its width.

relevant lines of CSS from my example:

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

Or alternatively:

you coul use transform:translate(-760px); in place of left - then you don't need to position the shadow element absolutely, see this DEMO .