Center text in parent element
HTML
<div id="first-method">
<h2>Text</h2>
</div>
<div id="second-method">
<h2>Text</h2>
</div>
<div id="third-method">
<h2>Text</h2>
</div>
SCSS
div {
width: 300px;
height: 200px;
background-color: #ccc;
text-align: center;
margin: 50px auto;
}
#first-method {
/* same size as div height, but will not work with multiple lines of text */
line-height: 200px;
}
#second-method {
position: relative;
h2 {
margin: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
}
#third-method {
display: flex;
align-items: center;
justify-content: center;
}
