0

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

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

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

这是我到目前为止所得到的：

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，但我不想使用它们。

4

1 回答 1

0

尝试添加这个 css 属性

.right article{
margin:auto;
}

或者你可以这样做。

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

对父 div，应用position:relative和要居中的 de div 应用

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

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

于 2013-06-25T12:33:43.300 回答