Center elements inside two div vertically [duplicate] - css

Question

This question already has answers here:
Vertically center two elements within a div [duplicate]
(2 answers)
Closed 5 years ago.
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.

Answer 1

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>

Answer 2

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>