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; }
JAVASCRIPT
Expand for more options Login