I am trying to centrally align both vertically and horizontally the <div> element, with its child elements <h1> and <h2> being horizontally centered in relation to the parent <div>. To achieve this, I have created a specific class for it as shown below. However, instead of being centered, they appear aligned to the left. What could be causing this issue?
.centered {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hcentered {
left: 50%;
transform: translate(-50%, 0);
}
.results {
position: absolute;
}
.resultsText {
position: relative;
}<div class="centered results">
<h1 class="hcentered resultsText">Header 1</h1>
<h2 class="hcentered resultsText">Header 2</h2>
</div>