css - 垂直居中，水平居中在左半部分

Question

如何使容器“位置”垂直居中？水平方向它应该在屏幕的左半部分居中(不知道如何更好地解释)。

JSFiddle: http://jsfiddle.net/gbgopon2/1/

<div id="background"></div>
<div id="overlay">
    <div id="position"></div>
</div>

CSS:

#background {
    background-color: #ddd;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
}

#overlay {
    position: absolute;
    height: 100%;
    background-color: #fff;
    width: 100%;
    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: 100px;
    height: 50px;
    background: red;
}

Answer 1

此添加应垂直对齐 div 并在左半部分居中:

#position {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 25%;
    right: 75%;
    margin: auto -50px; /* width / 2 */
}

fiddle :http://jsfiddle.net/gbgopon2/5/