css - 将两个子 div 放置在另一个 div 中，一个居中，另一个在右上角/右下角

Question

我在容器 div 中有两个 div 并且我试图将其中一个子 div 放置在中心(垂直和水平)，另一个在顶部 -容器的左/右下角。

两个子 div 都只包含文本。我尝试了一些东西，并且能够单独应用这两种样式，即如果只有两个 div 中的一个在那里，它就会按要求工作。我无法弄清楚如何让两种样式同时应用。我试过使用位置和 z-index，但由于我有限的 CSS 知识，我一直未能取得突破。

更新:我希望文本相对于外部容器居中。

HTML

Top left works
<div class="container">
    <div class="topLeft">value</div>
</div>
Center Works
<div class="container">
    <div class="center">label</div>
</div>
Both don't work simulaneously
<div class="container">
    <div class="topLeft">value</div>
    <div class="center">label</div>
</div>

CSS

.container {
    border-width:1px;
    width:200px;
    border-style:solid;
    display:table;
    height:300px;
}
.center {
    text-align:center;
    display:table-cell;
    vertical-align:middle;
    z-index:5;
}
.topLeft {
    text-align:left;
    display:table-cell;
    vertical-align:top;
    z-index:10;
}

演示

http://jsfiddle.net/jugal/E5zGw/

我主要针对 IE8+ 和 chrome，并且可以根据需要灵活地更改 html 和 css

Answer 1

只需将 .container div position: relative; 然后 position: absolute; 给子 div 以同时定位它们，使用left 和 top 属性:

JsFiddle:http://jsfiddle.net/E5zGw/14

你只需要摆脱 display: table-cell 因为如果你这条路线不需要它。