使用 CSS 使 div 不均匀居中

Question

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

它工作正常，但是如果对话框上方和下方的 space 不完全相等，则看起来会更好，剩余的 space 的 40% 在上方，60% 在下方对话。它变得棘手，因为对话框高度随内部文本的数量而变化。

因此，例如，如果浏览器高度为 1000px，而对话框 window 高度为 400px，我希望剩余的垂直 space（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

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

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

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>

Answer 2

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

#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 值并用 translate 纠正位置（与居中时的 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>

Answer 3

您可以添加间隔 div 并使用 4:6 比率设置 flex-grow。

#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>

Answer 4

使用位置和边距的简单方法，我假设您的对话框高度始终是浏览器高度的 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>

使用 CSS 使 div 不均匀居中

Center a div unequally using CSS

html

css

centering

flexbox