css - 可伸缩的定位和居中

Question

1) 我试图显示图像(由容器包裹)垂直居中并居中在容器的左半部分。 (基于我的上一篇文章:Partial cover the screen and slide the overlay-element)

2) 问题是，图像是一个 svg 文件，它应该适合用户屏幕，因此它具有动态宽度和高度。我使用 47% 的宽度，高度应该自动设置以保持比例。

对于第一部分(居中和定位)，这是正在工作的 fiddle :http://jsfiddle.net/gbgopon2/10/

如您所见，红色占位符具有给定的高度和宽度。

现在我尝试添加图像并更改没有高度的宽度。这根本不起作用。

http://jsfiddle.net/gbgopon2/13/

所以也许有人有更好的解决方案，可以将具有动态尺寸的可缩放 svg-image 以垂直居中并居中在屏幕左半部分的方式放在页面上......为什么滑动覆盖容器时图像不会消失？

CSS:

body {
    margin: 0;
}
#background {
    background-color: #ddd;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}
#overlay {
    height: 100%;
    position: absolute;
    background-color: #fff;
    left: 0em;
    right: 0em;
    top: -3em;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
#position {
    width: 40%;
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 25%;
}

HTML:

<div id="background"></div>
<div id="overlay">
    <div id="position">
        <img src="http://placeskull.com/170/170">
    </div>
</div>

Answer 1

ghost element的方法使用 IE11、Firefox 和 Chrome 进行了测试:

    body {
        margin: 0;
    }
    #background {
        background-color: #ddd;
        width: 100%; height: 100%;
        position: absolute; z-index: 0;
    }
    #overlay {
        height: 100%;
        position: absolute; left: 0em; right: 0em; top: -3em;
        background-color: #fff;
        overflow: hidden; /* it hides the image it's covered */
        -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.3);
        z-index: 1;
    }
    #position {
        position: absolute; top: 0; left: 0; width: 50%; /* EDIT: added to center in the left half of the screen */
        text-align: center; height: 100%;
    }
    #position:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }
    #position img {
        display: inline-block;
        vertical-align: middle;
    }

http://jsfiddle.net/gzc6nbvv/9/

why doesn't the image disapear while sliding the overlay-container?

在 #overlay 选择器中添加 overflow: hidden; 即可解决。