html - 使用 CSS 使 div 不均匀居中

Question

我使用 Flexbox 将一个 div 置于另一个 div 的中心。想象一个在需要时在屏幕中央弹出的对话框窗口。

它工作得很好，但是如果对话框上方和下方的空间不完全相等，即 40% 的剩余空间位于对话框上方，60% 位于对话框下方，那么看起来会好得多。这变得很棘手，因为对话框高度随内部文本量的变化而变化。

例如，如果浏览器高度为 1000px，对话框窗口高度为 400px，我希望剩余的垂直空间 (600px) 为对话框上方 240px，下方 360px。

我可以用 JavaScript 来做到这一点，但我很好奇 CSS 是否有一些聪明的方法。我尝试向 #dialogBox div 添加底部边距，但当对话框高度接近浏览器高度时，这不起作用。

#dialogBoxPanel {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

#dialogBox {
  width: 350px;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Text</div>
</div>

Answer 1

使用伪元素和列方向来模拟空白。只需调整伪元素的 flex-grow 即可控制每个元素应占用多少可用空间。相等的 flex-grow 将提供相等的空间:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:4;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:6;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

您还可以使用2 和3。我们只需保持相同的比例即可:

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  width: 350px;
  border:1px solid;
}

#dialogBoxPanel:before {
  content:"";
  flex-grow:2;
}
#dialogBoxPanel:after {
  content:"";
  flex-grow:3;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>

另一个想法是使用等于 40% 的 top 值并通过翻译纠正位置(与居中时 50% 的逻辑相同)

#dialogBoxPanel {
  position: absolute;;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  /* the center */
  background:linear-gradient(red,red) center/100% 1px no-repeat;
}

#dialogBox {
  position:relative;
  top:40%;
  width: 350px;
  transform:translateY(-40%);
  margin:auto;
  border:1px solid;
}

<div id="dialogBoxPanel">
  <div id="dialogBox">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit diam eu nisl fringilla ornare. Pellentesque aliquam quam et tellus egestas sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin bibendum,</div>
</div>