html - 将div居中到页面，无论其包含在其中的元素如何

我正在进行数据可视化（vis），并且希望vis拥有用于不同颜色的按键（如侧边栏）。我通过制作一个div并将其向左浮动，而vis则向右浮动来做到这一点：

的HTML

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

的CSS

#key{
    float:left;
    width:5%;
}
#visContainer{
    float: right;
    width: 95%;
}
#vis{
    outline: solid;
    outline-color: black;
}

但是显然div并不总是在屏幕上居中。有没有办法做到这一点（即具有居中的vis且sidediv不妨碍vis div的中心性）？

ps。如果可能的话，我想避免像这样使用绝对位置作为id来随页面大小缩放。

最佳答案

您可以使用百分比来计算vis容器元素中屏幕的中心：

50% * 95% = 47.5%

那就是vis元素的中心所在。现在只需减去其宽度的一半，您就可以开始了：

47.5% - (10% / 2) = 42.5%

在这里看到它：

#key{
    float:left;
    width:5%;
  height: 30px;
  background: yellow;
}
#visContainer{
    float: right;
    width: 95%;
  height: 30px;
  background: cyan;
  position: relative;
}
#vis{
    outline: solid;
    outline-color: black;
  width: 10%;
  margin-left: 42.5%;
}

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

当然，您可以通过使用侧边栏上的绝对位置来避免所有这些数学运算（它仍然会缩放）。请注意，由于容器为100％宽，因此vis元素的10％宽度现在是整个车身宽度的10％（“在#key侧栏下方”）。

在这里看到它：

#key{
  position:absolute;
  z-index: 1;
    width:5%;
  height: 30px;
  background: yellow;
}
#visContainer{
  height: 30px;
  background: cyan;
  position: relative;
}
#vis{
    outline: solid;
    outline-color: black;
  width: 10%;
  margin: auto;
}

<div id="Container">
    <div id="key"></div>
    <div id="visContainer">
        <div id="vis"></div>
    </div>
</div>

关于html - 将div居中到页面，无论其包含在其中的元素如何，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36745555/