html - 如何在绝对定位的以窗口为中心的容器中获得完美居中的元素(被两个独立元素包围)？

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>

block 级 #container 元素应该绝对定位并完全居中于整个浏览器窗口的宽度(而不是高度!):

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

block 级 #center 元素将没有预定义的宽度或高度，它的尺寸是不可预测的，它应该根据需要占用尽可能多的空间(但也许它会预定义 最大高度/最大宽度 值)。 编辑/澄清:它应该采用最小所需的宽度/高度，这意味着它需要 20 个像素用于填充，以及一些少量的像素用于“嗨!”，仅此而已，所以在这种情况下，它相对于容器来说会非常小。

#center {
  display: block;
  background-color: green;
  padding-left: 10px;
  padding-right: 10px;
}

block 级 #left 元素应该占用#container 所有可能的剩余空间，并且它还会有 text-overflow: ellipsis属性:

#left {
  display: block;
  background-color: red;
  padding-left: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#right 元素应该占用#container 的所有可能剩余空间。它没有特殊的属性，只是一个独立的 block 级元素，可以包含任何东西。

#right {
  display: block;
  background-color: blue;
}    

结果应该是这样的(在下面的例子中，假设没有空格来包含 #left 元素的 "ext." 子字符串，并用省略号代替):

--------------------------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 的左/右边界与窗口的左/右边缘之间的距离应相等:(100vw - 95vw)/2 = 2.5vw .
如何做到这一点？我已经阅读了关于如何将元素居中的所有可能解释，但找不到这个特定问题的答案......我所看到的是将预定义尺寸应用于每个元素，然后独立地对每个元素应用绝对定位......这不是我想要的。

Answer 1

您将需要使用 display:flexbox; 来创建“完美的中心 div”。

#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 的宽度，以使其完全居中。

此处演示:https://jsfiddle.net/usytj8gm/3/