Как поместить по центру текст с display inline block?

Question

[Ivan Ivanovich]

Здравствуйте. У нас есть код:

<div class="line">Text</div>

.line{
  background: #f0f;
  text-align: center;
  display: inline-block;
  text-align: center;
}

Как сделать так, чтобы этот текст с задним фоном были ровно по центру страницы. margin: 0 auto не работает.

Заранее спасибо.

Comments

[Lord_Dantes]

display: flex;
align-items: center;
justify-content: center;
height: 100%:

[Ivan Ivanovich]

slave bb, Тогда задний фон во всю длину

[Lord_Dantes]

Ivan Ivanovich, width: auto;

Answer 1

[Andrew Garfield]

Всё что нужно - это добавить к родителю эти свойства.

display: flex;
justify-content: center;
align-items: center;

Answer 2

[Alfieros]

Другой вариант решения