Why a paragraph does not fit in the center?

There's a HTML code:
<div class="par">
<p>Paragraph</p>
</div>


And here's the CSS code:
.par{
 background-color: red;
 height: 50px;
}

.par p{
 width: 72px;
 font-family: 'Open Sans', sans-serif;
 font-size: 15px;
 color: #fff;
 margin: auto;
}


The browser shows this: 5a318ace95301823047355.png

And the question is why the unit is "paragraph" did not move to the center vertically. Horizontally it is in the center, and vertically — no. Although the margin property value of the auto, not 0 auto.
June 10th 19 at 15:21
3 answers
June 10th 19 at 15:23
June 10th 19 at 15:25
.par{
 text-align: center;
}
.par p{
 line-height: 50px;
}
June 10th 19 at 15:27
I recommend to study the technology Flexbox , it helps you build and positioning of elements .

And at your stage, specify
margin-top: 25%;
margin-left: 50%

but this design remove
margin: auto;
}

Find more questions by tags LayoutCSSHTML