I've been trying to center multiple lines of text in a table cell using the table method, but no matter how many online guides and SO posts I follow, I just can't seem to get it right.
What I'm aiming for is to have the text perfectly centered within the grey area of the div's background (as shown in the image below). As I resize the browser, I also want the text to expand and fill the entire width of the div, though that's a problem for another day. For now, could someone please review my CSS code (or maybe even the HTML setup) and let me know why the text isn't centering properly?
HTML
<div id = "about">
<div id = "header">
<h3>About.</h3>
<div id = "about-background">
<div id = "about-text" class="left-grid">
<p>Lorem ipsum dolor sit amet, malesuada magna, justo nisl consectetuer diam litora enim. Faucibus at aenean vitae, tristique curabitur sed tempus ligula, quam pellentesque in dui pede cras, nonummy feugiat justo tempor condimentum tincidunt. A cursus facilisi sed, sem magna, pharetra facilisis vestibulum pellentesque repellat turpis. Nam phasellus, purus ut magna amet. Sit adipiscing duis eget hendrerit, nec egestas magna a odio augue sapien, magna a elementum rutrum placerat mauris, sed in.</p>
</div>
</div>
</div>
</div>
CSS
#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
height: 525px;
background: linear-gradient(90deg, #bbc6cb 50%, #ffffff 50%);
}
#about-text {
font-family: Quicksand;
font-size: 22px;
line-height: 35px;
font-weight: 300;
width: 45%;
display: table;
}
#about-text p {
display: table-cell;
text-align: center;
vertical-align: middle;
}