Question

我有一个看起来像这样的标记：

<div id="container">
  <div id="left">
  It is the primary text.
  </div>
  <div id="center">
  Hi!
  </div>
  <div id="right">
  some content 
  </div>      
</div>

块级#container元素应该绝对定位并完全以整个浏览器窗口的宽度（而不是高度！）为中心：

#container {
  display: block;
  width: 95vw;
  background-color: white;
  position: absolute;
  top: 75px;
}

块级#center元素没有预定义的宽度或高度，它的尺寸是不可预测的，它应该占用所需的空间（但也许它会有预定义的max-height / { {1}}值）。编辑 /澄清：它应该采用最小所需的宽度/高度，这意味着填充需要20个像素，而＃34; Hi需要一些少量像素！＆＃34;，仅此而已，所以在这种情况下，它相对于容器来说会非常小。

max-width

块级#center { display: block; background-color: green; padding-left: 10px; padding-right: 10px; }元素应该 #container 的所有可能剩余空间，并且它还具有#left属性：

text-overflow: ellipsis

#left { display: block; background-color: red; padding-left: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }元素应该 #container 的所有剩余空间。它没有特殊的属性，但它只是一个独立的块级元素，可以包含任何东西。

#right

结果应如下所示（在下面的示例中，假设没有空格来包含#right { display: block; background-color: blue; }元素的"ext."子字符串，并将其替换为省略号）：

#left

请注意，--------------------------WINDOW EDGE-------------------------- | | | | | | W (75 px) W I | I N | N D +—————————————————————————————————————————————————————————+ D O | It is the primary t...| Hi! |some content | O W +—————————————————————————————————————————————————————————+ W <- - - - - - - - - - - - -(95 vw)- - - - - - - - - - - - -> E E D D G G E E的左/右边框与窗口左/右边缘之间的距离应相等：#container。
怎么做到这一点？我已经阅读了关于如何使元素居中的所有可能的解释，但是找不到这个特定问题的答案......我所看到的是将预定义的维度应用于每个元素，然后独立地对每个元素进行绝对定位...这不是我想要的。

Answer 1

您需要使用display:flexbox;来创建＆＃34; 完美中心div ＆＃34;。

#container {
  display: flex;
  width: 95vw;
  background-color: white;
  position: absolute;
  top: 75px;
  justify-content: center;
  flex-flow: row nowrap;
  left: 0; 
  right: 0; 
  margin:auto;
}

#center {
  display: inline-block;
  background-color: green;
  padding-left: 10px;
  padding-right: 10px;
  align-self: center;
  text-align: center;
  animation: center;
  width:auto;
}

#left {
  display: inline-block;
  background-color: red;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 35%;
  flex-grow: 1;
}

#right {
  display: inline-block;
  background-color: blue;
  flex-grow: 1;
  width: 35%;
}

请注意：您需要同等地定义#left和#right width以使其完全居中。

在这里演示：https://jsfiddle.net/usytj8gm/3/

如何在绝对定位的以窗口为中心的容器内获得完美居中的元素（由两个独立元素包围）？

1 个答案: