Vertikal zentriert feste Größe div in einem anderen div

Question

Ich habe eine kleine 'Vorlage' erstellt, die einen Titel, ein Bild und zwei Links enthält.

Ich möchte diese Vorlage (Klasse: plant-row) vertikal in der Seite zentrieren, aber ich kann es nicht tun.

habe ich versucht, display:table auf den plant-inner-col und display:table-cell auf der Vorlage zu verwenden, aber es bricht die Bildgröße Begrenzung, die den gesamten Bildschirm Aufnahme endet nach oben.

Könnten Sie mir bitte helfen, einen Weg zu finden, diese Box vertikal zu zentrieren, ohne auf die Größe zu verzichten?

Hinweis: das ganze Ding verwendet Bootstrap, daher die Klassen, aber ich denke nicht, dass es hier viel Einfluss hat, daher entschied ich mich, die Geige einfach zu halten.

Cheers,

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Ist das, was Sie brauchen? Ich verwandelte .plant-inner-col in eine Flexbox mit vertikaler Ausrichtung in der Mitte.

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    width: 100%; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie es position: relative;, top: 50%; und tranform: translateY(-50%); geben kann.

Dies bringt die Spitze des Elements in die Mitte und übersetzt es dann um die Hälfte seiner Höhe nach oben.

.kpi-homepage-container{ 
 
    margin-left:0px; 
 
    margin-right:0px; 
 
    padding-left:0px; 
 
    padding-right:0px; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    position:fixed; 
 
    background-color: #f5f5f5; 
 
    width:100%; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

Sie relativ die Position des div einstellen können Sie zentrieren möchten, dann legen Sie die Top-Offset:

.plant-row { 
    box-sizing: border-box; 
    box-shadow: 1px 1px 1px; 
    text-align: center; 
    border: 1.5px solid; 
    border-radius: 2px; 

    /* code to center vertically */ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Answer 4

Einfach nur hinzufügen:

.plant-row { 
    box-sizing: border-box; 
    box-shadow: 1px 1px 1px; 
    height: calc((100% - 35px)/2); 
    text-align: center; 
    border: 1.5px solid; 
    border-radius: 2px; 
    overflow: hidden; 
    margin:auto; 
    position:absolute; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Überprüfen Sie diese:

body 
 
{ 
 
    width:100%; 
 
    height:100%; 
 
} 
 
.kpi-homepage-container{ 
 
    width:100%; 
 
    height:100%; 
 
    margin:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    
 
    background-color: #f5f5f5; 
 
} 
 
.plant-col { 
 
    height: 100%; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
    text-align: center; 
 
} 
 

 
.plant-inner-col { 
 
    height: 100%; 
 
    padding-left: 7.5px; 
 
    padding-right: 7.5px; 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 

 
.plant-row { 
 
    box-sizing: border-box; 
 
    box-shadow: 1px 1px 1px; 
 
    height: calc((100% - 35px)/2); 
 
    text-align: center; 
 
    border: 1.5px solid; 
 
    border-radius: 2px; 
 
    overflow: hidden; 
 
    margin:auto; 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
} 
 

 
.plant-row .plant-name { 
 
    font-size: 18px; 
 
    padding-top: 5px; 
 
} 
 

 
.plant-row .plant-img { 
 
    height: 70%; 
 
} 
 

 
.plant-row .plant-link { 
 
    height: 15%; 
 
    margin-top: 10px; 
 
}

<div class="kpi-homepage-container"> 
 
    <div class="col-md-12 plant-col"> 
 
    <div id="template-container" style="max-width:700px; height:100%; margin: 0 auto;"> 
 
     <div class="col-md-6 plant-inner-col"> 
 
     <div class="plant-row"> 
 
      <p class="plant-name">HMD</p><img class="plant-img" src="https://s-media-cache-ak0.pinimg.com/originals/a8/39/35/a83935a027475e34ebace7d4a1ed33e8.jpg"> 
 
      <div class="row plant-link"> 
 
      <div class="col-md-6"><a class="btn btn-primary" href="#">To Level 0</a></div> 
 
      <div class="col-md-6"><a class="btn btn-info" href="#">To Level 1</a></div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Absolute horizontale und vertikale Centering In CSS: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/