Centring multiple lines of texts in a table cell - html

Question

I'm using the table method to centre multiple lines of text in a table cell. But despite following multiple SO posts and other online guides, I'm unable to centre the text.
What I want is to centre the text inside the grey part of the divs background (see image below), then when I resize the browser, I want it to span across the entire width of the div (but that's a future problem). For now, can someone take a long at my CSS code (maybe it's the HTML code setup) and tell me why it isn't centring?
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;
}

Answer 1

#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
height: 525px;
background: lightgrey;
display: table;
}
#about-text {
font-family: Quicksand;
font-size: 18px;
line-height: 35px;
font-weight: 300;
width: 45%;
margin: 0 auto;
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div id = "about">
<div id = "header">
<h3>About.</h3>
<div id = "about-background">
<div id = "about-text">
<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. </p>
</div>
</div>
</div>
</div>

Answer 2

The width property in #about-text is causing your text to be only shown at 45% of the page. Once you remove that and increase your background length to 100% it will be centered.
#about #header {
padding: 10px 0px;
text-align: center;
font-size: 36px;
}
#about-background {
margin: auto;
background: linear-gradient(90deg, #bbc6cb 100%, #ffffff 100%);
}
#about-text {
font-family: Quicksand;
font-size: 22px;
line-height: 35px;
font-weight: 300;
display: table;
}
#about-text p {
display: table-cell;
text-align: center;
}
<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>