How can I center the text within a <p> tag vertically?

Question

I'm trying to center a <p> tag within its container, and while I have been able (using the top/translateY) trick to center the tag itself, the center of the text is not actually the center of the <p> tag's content, as seen here (the red line is the true middle of the tag):

How can I center the text in the <p> tag as well ?

Answer 1

To center a <p> tag within its container, try to use a property of table. Like, you have to set a property of parent container to display:table then set its child property to display: table-cell; and vertical-align: middle;

Check this fiddle here

Your Sample HTML should be like,

<div class="parent">
    <div class="child">
        <p>...... Your Text goes here .....</p>
    </div>
</div>

And relative CSS should be like,

.parent {
    width: 300px;
    height: 200px;
    background: blue;
    padding: 30px;
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

p {
    display: block;
    text-align: center;
    color: #FFFFFF;
    margin: 0px;
}

For your reference check this out