html - 在表格单元格中居中放置多行文本

Question

我正在使用表格方法将表格单元格中的多行文本居中。但是尽管遵循了多个 SO 帖子和其他在线指南，我还是无法将文本居中。

我想要的是将文本居中放置在 div 背景的灰色部分(见下图)，然后当我调整浏览器大小时，我希望它跨越 div 的整个宽度(但这是 future 的问题).现在，有人可以花很长时间查看我的 CSS 代码(也许是 HTML 代码设置)并告诉我为什么它不居中吗？

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>