Question

当高度未固定时，如何将固定div居中？

.centerDiv {
  position: fixed;
  top: 50%;
  right: 50px;
}

<div id="div1" style="height:300px;width:120px;background-color:red;right:10%;" class="centerDiv"></div>
<div id="div2" style="height:500px;width:120px;background-color:red;right:50%;" class="centerDiv"></div>

示例：http://codepen.io/anon/pen/qCLit

我如何在中心总是有一个div？

Answer 1

可能是其他合法的方式，但这会给你最大的自由。

包含您希望在另一个div内居中的div。容器div将是固定的，但它将是透明的（只是用于容纳浮子）。然后，您可以像往常一样将内部centerDiv设置为position: relative; margin: 0 auto; width: 120px;。

以下示例fiddle can be seen here。

HTML：

<div id="contain">
    <div id="div1" style="height:300px;background-color:red;" class="centerDiv"></div>
    <div id="div2" style="height:500px;background-color:red;" class="centerDiv"></div>
</div>

CSS：

#contain {
    position:fixed;
    top:50%;
    right: 0;
    left: 0;
}
.centerDiv {
    position: relative;
    margin: 0 auto;
    width: 120px;
}

目标并不完全清楚你的目标是围绕着中心的其他div，所以如果你详细说明我可以调整以更好地适应你的情况。现在他们都只是彼此重叠。

Answer 2

如果要水平居中固定宽度为固定的元素：

.centerDiv {
  position: fixed;
  left: 50%;
  width: 300px;
  margin-left: -150px; /* width/2 */
}

同样适用于垂直中心（设置高度）：

.centerDiv {
  position: fixed;
  top: 50%;
  height: 300px;
  margin-top: -150px; /* height/2 */
}

要使动态宽度的div水平居中，您必须添加另一个div，并使用inline-block到子div：

<div class="outerCenterDiv">
  <div class="centerDiv">test</div>
</div>

CSS：

.outerCenterDiv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center
}
.centerDiv {
  display: inline-block;
}

要使具有动态高度的div垂直居中，您必须添加另一个div，并使用内联块样式和行高：

<div class="outerCenterDiv">
  <div class="centerDiv">test</div>
</div>

CSS：

.outerCenterDiv {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  line-height: 100%;
}
.centerDiv {
  display: inline-block;
  vertical-align: middle;
  line-height: 1.4; /* reset the line-height to your good value */
}

您可以将两种解决方案结合起来。

当高度不固定时，固定div的水平居中

2 个答案: