Why a paragraph does not fit in the center?

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

And here's the CSS code:
 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
 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