Zentrieren Sie einen DIV ungleich mit CSS

Ich zentriere einen DIV mithilfe einer Flexbox in einem anderen DIV. Stellen Sie sich ein Dialogfenster vor, das bei Bedarf in der Mitte des Bildschirms angezeigt wird.

Es funktioniert gut, aber es würde viel besser aussehen, wenn der Platz über und unter dem Dialogfeld nicht genau gleich wäre, da 40% des verbleibenden Platzes über und 60% unter dem Dialogfeld liegen. Es wird schwierig, da die Höhe des Dialogfelds von der Textmenge abhängt.

Wenn die Browserhöhe beispielsweise 1000 Pixel und die Höhe des Dialogfensters 400 Pixel beträgt, soll der verbleibende vertikale Raum (600 Pixel) 240 Pixel über und 360 Pixel unter dem Dialogfeld liegen. Ich könnte es mit Javascript machen, aber ich bin gespannt, ob es mit CSS einen cleveren Weg gibt. Ich habe versucht, der #dialogBox DIV einen unteren Rand hinzuzufügen, aber das funktioniert nicht, wenn sich die Dialoghöhe der Browserhöhe nähert.

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

Verwenden Sie Pseudoelement- und Spaltenrichtung, um den Leerraum zu simulieren. Passen Sie einfach flex-growdas Pseudoelement an, um zu steuern, wie viel freien Speicherplatz jedes einzelne belegen soll. Gleiches Flex-Grow bietet den gleichen Raum:

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

Sie können auch 2und verwenden 3. Wir müssen einfach das gleiche Verhältnis beibehalten:

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

Eine andere Idee ist es, einen Spitzenwert zu verwenden, der gleich ist, 40%und die Position mit translate zu korrigieren (gleiche Logik wie 50%beim Zentrieren).

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

Diese Lösung verwendet display: grid, es ist eine neue Funktion. Überprüfen Sie daher unbedingt die Browserunterstützung und klicken Sie hier , um weitere Informationen zu erhalten.

Dies ist die Zeile, die den oberen und unteren Bereich steuert:

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

Der Textinhalt des Snippets kann bearbeitet werden, damit Sie überprüfen können, ob das Feld zentriert bleibt, auch wenn sich die Höhe ändert.

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

Sie können Spacer Divs hinzufügen und das Flex-Grow mit einem Verhältnis von 4: 6 einstellen.

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

Auf einfache Weise mit Position und Rand habe ich angenommen, dass Ihre Dialoghöhe immer 40% der Browserhöhe beträgt.

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