Center elements inside two div vertically

Question

How can I center these four buttons inside their own div vertically and horizontally?

Update: No Flexbox please. I do not have that luxury.

#outer {
  width: 400px;
  height: 200px;
  background-color: black;
  display: table-cell;
}

#innerOne {
  width: 400px;
  height: 100px;
  background-color: red;
  vertical-align: middle;
}

#innerOne {
  width: 400px;
  height: 100px;
  background-color: blue;
  vertical-align: middle;
}

<div id="outer">
  <div id="innerOne">
    <button>One</button>
    <button>Two</button>
  </div>
  <div id="innerTwo">
    <button>Three</button>
    <button>Four</button>
  </div>
</div>

I want "one", "two" to be centered inside the blue div vertically and horizontally. The same for "three" and "four" in the black div.

I have tried many different options by setting their display to table and table-cell without the desired effect I want.

Ori Drori · Answer 1 · 2017-06-22T13:52:12.170

Since the buttons are inline blocks you can center them vertically using a pseudo-element. The pseudo element has the height of the container (.inner), and is vertically aligned, and all inline blocks with less height, will be centered to it. To center them horizontally set text-align: center on the container (.inner).

#outer {
  width: 400px;
  height: 200px;
  background-color: black;
}

.inner {
  width: 400px;
  height: 100px;
  text-align: center;
}

.inner::before {
  display: inline-block;
  height: 100%;
  content: '';
  vertical-align: middle;
}

#innerOne {
  background-color: red;
}

#innerTwo {
  background-color: blue;
}

<div id="outer">
  <div id="innerOne" class="inner">
    <button>One</button>
    <button>Two</button>
  </div>
  <div id="innerTwo" class="inner">
    <button>Three</button>
    <button>Four</button>
  </div>
</div>

score 0 · Accepted Answer · answered Jun 22 '17 at 13:51

for a single line, you could use a line-height equal to the box's height to vertical align at the center the inline content.

and text-align for the horizontal part

#outer {
  width: 400px;
  height: 200px;
  background-color: black;
  /*display: table-cell;useless here i believe*/
  text-align:center;
}


#innerOne,
#innerTwo {
  width: 400px;
  height: 100px;
  line-height:100px;
  background-color: blue;
}
#innerOne {
  background-color: red;
}

<div id="outer">
  <div id="innerOne">
    <button>One</button>
    <button>Two</button>
  </div>
  <div id="innerTwo">
    <button>Three</button>
    <button>Four</button>
  </div>
</div>

Center elements inside two div vertically

2 Answers2