CSS를 사용하여 DIV를 불균등하게 중앙에 배치

flexbox를 사용하여 다른 DIV 내부에 DIV를 배치하고 있습니다. 필요할 때 화면 중앙에 나타나는 대화 상자를 생각해보십시오.

잘 작동하지만 대화 상자 위와 아래의 공간이 정확히 같지 않으면 나머지 공간의 40 %가 대화 상자보다 높고 60 % 아래에 있습니다. 대화 상자 높이는 내부 텍스트의 양에 따라 달라지기 때문에 까다로워집니다.

예를 들어 브라우저 높이가 1000px이고 대화 상자 높이가 400px이면 나머지 수직 공간 (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>

의사 요소와 열 방향을 사용하여 공백을 시뮬레이션하십시오. 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%translate와 동일한 위치를 사용하고 위치를 수정하는 것입니다 ( 50%cent centring 과 동일한 논리 )

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

스페이서 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>