html - 在不是全宽的可变大小容器内居中？

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;
    }

}

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

我尝试过的:

• display:table - 在 emergentweb.com/test/valign.html 找到的技术
• ghost-child -css-tricks.com 上的技术来源

这可能吗？

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

Answer 1

尝试添加这个 css 属性

.right article{
margin:auto;
}

或者你可以这样做。

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

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

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

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