使用CSS不均等地居中DIV

Question

我正在使用flexbox将DIV居中放置在另一个DIV中。考虑一个对话框窗口，在需要时会在屏幕中央弹出。

可以很好地工作，但是如果对话框上方和下方的空间不完全相等，则看起来要好得多，剩余空间的40％都位于对话框上方，而下方则是60％。之所以变得棘手，是因为对话框的高度随内部文本的数量而变化。

例如，如果浏览器高度为1000像素，对话框窗口高度为400像素，我希望剩余的垂直空间（600像素）为对话框上方240像素，对话框下方360像素。我可以用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

此解决方案使用display: grid，这是一项新功能，因此请务必检查browser support和click here以了解更多信息。

这是控制顶部和底部空格的行：

grid-template-rows: 40% [content-start] 1fr [content-end] 60%;

摘录文本内容可以编辑，即使高度发生变化，也可以检查框是否居中。

#dialogBoxPanel {
    display: grid;
    place-content: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    grid-template-rows: 40% [content-start] 1fr [content-end] 60%;
}
#dialogBox {
    border: 1px solid;
    width: 350px;
    grid-area: content;
}

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