จัด DIV ให้อยู่กึ่งกลางโดยใช้ CSS

ฉันอยู่ตรงกลาง DIV ในอีก DIV โดยใช้ flexbox นึกถึงหน้าต่างข้อความที่ปรากฏขึ้นตรงกลางหน้าจอเมื่อจำเป็น

มันใช้งานได้ดี แต่มันจะดูดีขึ้นมากถ้าพื้นที่ด้านบนและด้านล่างของกล่องโต้ตอบไม่เท่ากันโดยมี 40% ของพื้นที่ที่เหลืออยู่ด้านบนและด้านล่างของกล่องโต้ตอบ 60% มันซับซ้อนมากเนื่องจากความสูงของกล่องโต้ตอบจะแตกต่างกันไปตามจำนวนข้อความภายใน

ตัวอย่างเช่นหากความสูงของเบราว์เซอร์คือ 1,000 px และความสูงของหน้าต่างข้อความโต้ตอบคือ 400 px ฉันต้องการพื้นที่แนวตั้งที่เหลือ (600 px) เป็น 240 px ด้านบนและด้านล่างกล่องโต้ตอบ 360 px ฉันสามารถใช้ 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องค์ประกอบของหลอกเพื่อควบคุมพื้นที่ว่างที่แต่ละคนควรใช้ 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>

คุณสามารถเพิ่มตัวเว้นวรรคและตั้งค่าอัตราส่วนการขยายได้ด้วยอัตราส่วน 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>