使用CSS不平等地居中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;
}

  
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,

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

   
Text