当项目具有：在背景图像之后时，使用flexbox垂直居中

Question

如果这些div的背景图像附加到：after伪元素后，如何使用flexbox将div放在容器内？

在Chrome 33上，这些div对齐到顶部：http://jsfiddle.net/6SQ6W/

HTML：

<div id="container">
    <div id="left_and_right">
        <div>Left</div>
        <div>Right</div>
    </div>
</div>

CSS：

#container {
    height: 300px;
    width: 300px;
    background: blue;
    color: white;
    position: relative;
}

#container #left_and_right {
    position: absolute;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}

#container #left_and_right div, #container #left_and_right div:after {
    height: 50px;
    width: 100px;
}

#container #left_and_right div {
    background: green;
    /* THIS PREVENTS VERTICAL CENTERING BUT SEEMS NEEDED FOR THE REST OF THE STUFF */
    position: absolute;
}

#container #left_and_right div:after {
    content:"";
    position: absolute;
    background-image: url(http://www.animatedgif.net/lipsmouth/kissing_e0.gif);
    text-indent: -9999px;
    left: 0;
}

#container #left_and_right div:nth-of-type(2) {
    right: 0;
}