Setting up a grid layout where the content is centered can be tricky, but I've found a solution that works well. Take a look at the code snippet below:
.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>Content Here</h1>
</div>
</div>While using text-align: center; does help center horizontally, achieving vertical centering can be challenging. Especially when you have multiple columns next to each other with centered content like in this example:
.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>Centered Content</p>
</div>
</div>
</div>To achieve the desired layout as shown in the image linked [here](https://i.stack.imgur.com/B2Yoc.png), proper alignment of columns and centered content is essential. Check out the revised CSS code below for better alignment:
.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>