在非全宽的可变大小容器内居中？

Question

我找到了许多关于将可变大小的 div 居中的答案，但我想将 div 在可变大小的 div 中居中。在这件事上我找不到任何帮助。

基本上，我的包装器分为两列。左边一个固定宽度，右边一个应该填满屏幕的其余部分。我已经解决了这个问题。

现在，我想在右列的中间（垂直和水平）放置另一个 div。你可以在HERE找到我的目标说明。

THIS 是我目前得到的：

HTML：

<div class="wrapper">
  <div class="header">     
  </div>
  <div class="right">
    <section role="main">
      <article>
        <h1>Title</h1>
          <p>Paragraph</p>
      </article>
    </section>
  </div>
</div>

少：

html, body { 
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: #333;
    font: normal normal 12px/18px @font;
    color: @text;   
}

.wrapper {
    width: 100%;
  min-width: 800px;
    height: 100%;
}

.header {
    float: left;
    width: 250px;
    height: 100%;
    background: @c2;
}

.right {
  margin-left: 250px;
    background: @c1;
    height: 100%;

    article {
    height: 300px;
        width: 500px;
        background: #fff;
    }

}

我的目标是让白色 article 元素位于黄色元素的中间。

我尝试过的：

• display:table -technique 位于emerentweb.com/test/valign.html
• css-tricks.com 上的ghost-child -technique 源代码

这可能吗？

我并不介意 JS / jQuery，但我不想使用它们。

Answer 1

尝试添加这个 css 属性

.right article{
margin:auto;
}

或者你可以这样做。

如果要居中的 div 为 500px，请执行此操作。

对父 div 应用 position:relative 和你想居中的 de div 应用

.right article{
position:absolute;
left:50%;
margin-left:-250px;
}

这种机制也适用于垂直居中。