Center two divs in vertically

Question

I need help centering two divs vertically in a fixed width/height div, where the two div scales in the middle of the parent div. the first child div has a max-height, so it can scales dynamically to an extent. How can I center them so that teal and green divs goes in the middle of blue vertically?

JSFiddle HERE : https://jsfiddle.net/850sdmhj/

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
}
.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}
.color-green {
  max-height: 13px;
  font-size: 9px;
  background-color: green;
}

<div class="subtext-container">
  <div class="color-teal">teal</div>
  <div class="color-green">green</div>
</div>

possible duplicate of http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally — Praveen, Sep 24 '16 at 04:38

score 2 · Accepted Answer · answered Sep 24 '16 at 04:35

Try display:flex property to make it work.

Updated CSS:

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

Example fiddle : Demo

Note : Please check the browser support.

Browser support : http://caniuse.com/#feat=flexbox

score 0 · Answer 2 · answered Sep 24 '16 at 04:27

Use the following CSS for the subtext-container

.subtext-container {
  position: relative;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
  display:table-cell;
  vertical-align:middle;
}

Updated Fiddle https://jsfiddle.net/850sdmhj/1/

Praveen · Answer 3 · 2016-09-24T04:40:35.220

Maybe, by using a wrapper like

.color-wrap{ position:relative; top:50%; transform:translateY(-50%) }

.subtext-container {
  position: absolute;
  width: 180px;
  height: 65px;
  color: #ffffff;
  background-color: blue;
  bottom: 0;
}

.color-teal {
  max-height: 40px;
  overflow: hidden;
  background-color: teal;
}

.color-green {
  height: 13px;
  font-size: 9px;
  background-color: green;
}

.color-wrap{
 position:relative; top:50%;
 -webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)
}

<div class="subtext-container">
  <div class="color-wrap">
    <div class="color-teal">teal</div>
    <div class="color-green">green</div>
  </div>
</div>

score 0 · Answer 4 · answered Sep 24 '16 at 04:47

I would put .color-teal and .color-green inside another dive with ".vertical-align" class.

<div class="subtext-container">
  <div class="vertical-align">
    <div class="color-teal">teal</div>
    <div class="color-green">green</div>
  </div>
</div>

And then in CSS file:

.vertical-align{ /* This will do the trick to center content vertically */
  display: table-cell;
  vertical-align: middle;
}

.subtext-container {
  display: table; /* Add Display Table to the container */
}

This will work only if the container (the one with display:table) has a fixed height.

Your fiddle with the working example: https://jsfiddle.net/rx79sb6m/

Also you can read this post where you can find another 5 methods to achieve the same result.

Center two divs in vertically

4 Answers4