Почему абзац не помещается в центр?

Question

[Петр Петров]

Есть вот такой HTML-код:

<div class="par">
		<p>Paragraph</p>
</div>

И вот такой CSS-код:

.par{
	background-color: red;
	height: 50px;
}

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

Браузер показывает это:

А вопрос заключается в том, почему блок "paragraph" не сдвинулся в центр по вертикали. По горизонтали он в центре, а по вертикали — нет. Хотя у свойства margin значение auto, а не 0 auto.

Comments

[Максим Тимофеев]

А почему бы ему туда сдвигаться?

[Ankhena]

Чтобы он сдвинулся еще и по вертикали с помощью margin:auto, ему еще нужно абсолютное позиционирование и все координаты (top, left...) задать нулями.

Проще использовать флекс или у родителя line-height равный высоте.

Answer 1

[Анатолий]

Потому что CSS непредсказуем

Answer 2

[Артем Волков]

.par{
	text-align: center;
}
.par p{
	line-height: 50px;
}

Answer 3

[Юра Сторчака]

Рекомендую изучить технологию Flexbox , очень помогает вы выстраивании и позиционировании элементов .

А на вашем этапе укажите
margin-top: 25%;
margin-left: 50%

а вот эту конструкцию удалите
margin: auto;
}