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>

LESS：

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 -technique：emergentweb.com/test/valign.html
ghost-child -technique fount at css-tricks.com

这甚至可能吗？

我真的不介意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;
}

此机制也适用于垂直居中。

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

1 个答案: