Trung tâm một DIV không đồng đều sử dụng CSS

Tôi đang định tâm một DIV bên trong một DIV khác bằng flexbox. Hãy nghĩ về một cửa sổ hộp thoại bật lên ở giữa màn hình khi cần thiết.

Nó hoạt động tốt, tuy nhiên nó sẽ trông tốt hơn nhiều nếu không gian bên trên và bên dưới hộp thoại không chính xác bằng nhau, có 40% không gian còn lại ở trên và 60% bên dưới hộp thoại. Nó trở nên khó khăn vì chiều cao hộp thoại thay đổi theo số lượng văn bản bên trong.

Vì vậy, ví dụ, nếu chiều cao trình duyệt là 1000 px và chiều cao cửa sổ hộp thoại là 400 px, tôi muốn không gian dọc còn lại (600 px) ở trên 240 px và 360 px bên dưới hộp thoại. Tôi có thể làm điều đó với Javascript, nhưng tôi tò mò liệu có cách nào thông minh với CSS không. Tôi đã thử thêm một lề dưới vào #dialogBox DIV, nhưng nó không hoạt động khi chiều cao hộp thoại đang ở gần độ cao của trình duyệt.

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

Sử dụng phần tử giả và hướng cột để mô phỏng khoảng trắng. Đơn giản chỉ cần điều chỉnh flex-growphần tử giả để kiểm soát lượng không gian trống mà mỗi người nên sử dụng. Tăng trưởng flex bằng nhau sẽ cho không gian bằng nhau:

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

Bạn cũng có thể sử dụng 2và 3. Chúng ta chỉ cần giữ nguyên tỷ lệ:

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

Một ý tưởng khác là sử dụng giá trị hàng đầu bằng 40%và chỉnh sửa vị trí bằng dịch (cùng logic với 50%khi định tâm)

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

Giải pháp này sử dụng display: grid, đây là một tính năng mới, vì vậy hãy chắc chắn kiểm tra hỗ trợ trình duyệt và nhấp vào đây để tìm hiểu thêm.

Đây là dòng kiểm soát không gian trên cùng và dưới cùng:

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

Nội dung văn bản đoạn trích có thể được chỉnh sửa để bạn kiểm tra xem hộp có giữ chính giữa ngay cả khi chiều cao thay đổi hay không.

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

Bạn có thể thêm div spacers và đặt flex-grow với tỷ lệ 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>

Cách đơn giản bằng cách sử dụng vị trí và lề, tôi giả định rằng chiều cao hộp thoại của bạn luôn bằng 40% chiều cao trình duyệt.

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