Centering contents of multiple colums - html

Question

I'm creating a grid type layout, the contents of which will be centered, like here.
.outer {
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
I've used text-align: center; but there should be a better way to center the contents vertically too. My issue arises trying to do the same where two of these are next to each other with centered content, like this;
.outer {
width: 50%;
float: left;
position: relative;
background: pink;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
float: left;
position: relative;
background: pink;
}
}
.inner {
position: relative;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
It's looking even worse in a snippet for some reason but something like this would be desired;
I can get the column layout or I can center content. I need to be able to do both.
EDIT
.container {
width: 100%;
height: 500px;
background: pink;
margin-top: 10px;
margin-bottom: 10px;
}
.col {
width: 50%;
float: left;
position: relative;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
position: relative;
}
}
.inner {
position: relative;
}
.inner-details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="container">
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
</div>
</div>
<div class="col">
<div class="inner">
<div class="inner-details">
<h1>Middle 2<h1>
</div>
</div>
</div>
</div>

Answer 1

To center items you can use display: flex on the container div and also use
align-items: center; // vertical
justify-content: center; // horizontal
To achieve the image you attached you don't need so many containers, this can be done simply like in this example:
.container {
width: 100%;
height: 300px;
margin-top: 10px;
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.inner-details {
width: 50%;
float: left;
position: relative;
}
}
.inner-details {
background: pink;
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
margin: 10px;
}
<div class="container">
<div class="inner-details">
<h1>Middle 1</h1>
</div>
<div class="inner-details">
<h1>Middle 2</h1>
</div>
</div>

Answer 2

I hope this is your desire output. Please check the code snippets.
* {
box-sizing: border-box;
}
.outer {
width: 50%;
height: 100px;
float: left;
position: relative;
background: pink;
margin: 10px 0;
}
#media only screen and (max-width: 500px) {
.outer {
width: 100%;
}
}
.inner {
position: relative;
width: 100%;
height: 100%;
}
.inner-position {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>
<div class="outer">
<div class="inner">
<div class="inner-position">
<p>I should be centered</p>
</div>
</div>
</div>

Answer 3

Using the example from the first snippet and wrapping that twice I've managed to get the desired effect, there's still the issue with having to use text-align to align horizontally but this is the closest I can get without using flex or box-sizing: border-box;. If there's a more appropriate way to do this an example would be appreciated.
.wrap {
width: 100%;
display: table;
}
.col {
width: 50%;
float: left;
}
#media only screen and (max-width: 500px) {
.col {
width: 100%;
float: left;
}
}
.outer {a
width: 100%;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
position: relative;
background: pink;
text-align: center;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
<div class="wrap">
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered</h1>
</div>
</div>
</div>
<div class="col">
<div class="outer">
<div class="inner">
<h1>I'm Centered Too</h1>
</div>
</div>
</div>
</div>