Vertically center fixed size div inside an other div

Question

I have created a small 'template', containing a title, an image and two links.

I want to center this template (class: plant-row) vertically in the page, but I can't get to do it.

I have tried to use display:table on the plant-inner-col, and display:table-cell on the template, but it breaks up the image size limitation, which ends up taking the entire screen.

Could you please help me find a way to vertically center this box, without giving up on setting its size?

Note: the whole thing uses Bootstrap, hence the classes, but I don't thing it has much impact here, therefore, I elected to keep the fiddle simple.

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

Simple just add:

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

Check this out :

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 Horizontal And Vertical Centering In CSS: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Answer 2

you can set to relative the position of the div you want to center, then, you set the 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 3

Is this what you need? I turned .plant-inner-col into a flexbox with vertical alignment in the center.

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

You can give it position: relative;, top: 50%; and tranform: translateY(-50%);.

This brings the top of the element to the middle, and then translates it upwards by half its height.

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