如何定位具有相同边距的 div 左、右和上

Question

我想实现如下所示的布局：

我对仅使用 css/html 的解决方案感兴趣，因此不需要 javascript。

两个 div 的宽度都是动态的，所以我不能使用任何静态边距。

div 的边和顶部之间的间距应该相同。

我尝试在内部 div 上使用 margin: auto auto 0 auto，正如您在此 jsfiddle 中看到的那样，但它仅适用于左右。

Answer 1

注意，下面的尝试并不能完全回答问题，因为孩子的width 不能是动态的。

这个想法是对孩子使用百分比width + 百分比margin-top 值。这是一个响应式布局，查看代码中的 cmets，并在不同的窗口大小上尝试一下。

JSFiddle： http://jsfiddle.net/jkoycs6e/

body {
    margin: 0;
}
.outer {
    height: 100vh; /*for demo only*/
    background: teal;
    overflow: auto;
}
.inner {
    width: 80%;
    background: gold;
    margin: auto;
    margin-top: 10%; /* 100%-80%/2 */
}

<div class="outer">
    <div class="inner">
        hello<br/>hello<br/>hello
    </div>
</div>

Answer 2

这是不可能的。至少不是不使用javascript。没有纯 CSS 的解决方案。

Answer 3

如果您将 align="center" 放在 div 中，您每次都会到达屏幕中间，但 HTML5 不支持它，因此我建议使用 50:50 方法。

div
{
 text-align:center;
 margin-top:50%;
 margin-bottom:50%;
}

希望对您有所帮助。 ^^

Answer 4

将外部父级的溢出设置为 auto 并给您的 margin-top 一个相对值。像这样的：

.outer {
    background: blue;
    overflow: auto;
}
.inner {
    background:yellow;
    width: 100px;
    height: 100px;
    margin: 1em auto 0 auto;
}

<div class="outer">
    <div class="inner">
    </div>
</div>

Answer 5

这似乎有效：

.outer {
    height: 500px;
    width: 300px;
    background: blue;
    position: relative;
}

.inner {
    width: 80%;
    height: 200px;
    background:green;
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 0;
}

您可以根据预期的 k 值更改为边距标记的百分比。

这是fiddle

编辑：请注意，inner 的 width 必须按照百分比进行设置才能正常工作。另请注意，当按百分比指定边距时，边距的值将计算为容器 宽度 的百分比。即使对于垂直边距，百分比也适用于容器的宽度（而不是高度）。

这是一个SO post，它有助于理解如何相对于容器定位元素。

Answer 6

这个答案实际上并没有使用margin 属性，也不是只有两个div。

body {
    font-size: 26px;
    text-align: center;
    font-family: monospace;
  }


  #container {
    display: inline-block;
    position: relative;
    width: 100%;
  }

  #dummy {
    margin-top: 20%;
  }

  #element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver
    /* show me! */
  }

  #wrapper {
    display: table;
    width: 100%;
  }

  #row {
    display: table-header-group;
  }

  #left {
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  }

  #incenter {
    display: table-cell;
    background-color: aqua;
  }

  #right {
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  }

<div>
    <div id="container">
      <div id="dummy"></div>
      <div id="element">
        k (20%)
      </div>
    </div>
    <div id="wrapper">
      <div id="row">
        <div id="left">width = k (20%)</div>
        <div id="incenter">incenter</div>
        <div id="right">width = k (20%)</div>
      </div>
    </div>
  </div>

另一个以像素为单位的示例是here。

解释参考：

https://stackoverflow.com/a/12121309/2534513

https://stackoverflow.com/a/6615994/2534513

我实际上结合了上述两个答案中提到的技术来制作这个。 使用 JavaScript 会容易得多。