使用CSS不平等地居中DIV

我正在使用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>

使用伪元素和列方向模拟空白。只需调整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%和校正翻译的最高值（与对中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>

此解决方案使用display: grid，它是一项新功能，因此请务必检查浏览器支持并单击此处以了解更多信息。

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

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

您可以编辑代码段文本内容，以检查即使高度发生变化，该框也保持居中。

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

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

您可以添加spacer div并以4：6的比例设置柔韧性。

#dialogBoxPanel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;

  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

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

.spacer-top{
  flex-grow: 4;
}
.spacer-bottom{
  flex-grow: 6;

<div id="dialogBoxPanel">
  <div class="spacer-top"></div>
  <div id="dialogBox">Text</div>
  <div class="spacer-bottom"></div>
</div>

使用位置和边距的简单方法，我假设您的对话框高度始终是浏览器高度的40％。

.modal{
            max-height:50%;
            width:400px;
            margin: 10% auto 5% auto;
            position:absolute;
            top:0;
            bottom:0;
            right:0;
            left:0;
            overflow-y: auto
        }
        .modal-body{
            background-color: beige;
            padding: 20px;
            line-height: 21px
        }

的HTML

<div class="modal">
 <div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </div>
</div>