定位两个div元素，其中一个居中

Question

我想将div元素居中，并在右侧放置另一个div元素，并使用相同的垂直对齐方式。我不知道如何在不将两个元素集中的情况下继续进行。

这是我的代码。

<div class="container">
<div class="center"></div>
<div class="right"></div>
</div>

.center {
    width: 100px;
    height: 100px;
    margin: auto;
    background-color: red;
}

.right {
    width: 100px;
    height: 100px;
    background-color: blue;
}

http://jsfiddle.net/KWsnh/

Answer 1

Demo Fiddle

HTML

<div class="container">
    <div class='vcenter'>
        <div class="center"></div>
        <div class="right"></div>
    </div>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
body {
    display:table;
}
.container {
    display:table-cell;
    vertical-align:middle;
}
.center {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: red;
}
.vcenter {
    display:block;
    width:100%;
    position:relative;
}
.right {
    width: 100px;
    height: 100px;
    background-color: blue;
    position:absolute;
    right:0;
    top:0;
}

Answer 2

您可以使用calc来实现此目标：

<强> FIDDLE

.container{
    text-align:center;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;  
    display: inline-block;
}

.right {
    width: 100px;
    height: 100px;
    background-color: blue;
    position:absolute;
    top:0;
    left: calc(50% + 50px); // (100% - 100px)/2 + 100px (offset) = 50% + 50px
}

PS：Browser support for calc这些天非常好。