центр h1 в середине экрана

Question

Как я могу центрировать горизонтально и вертикально текст? Я не хочу использовать абсолютную позицию, потому что я стараюсь, и мой другой div становится все хуже. Есть ли другой способ сделать это?

div { 
 
    height: 400px; 
 
    width: 800px; 
 
    background: red; 
 
}

<div> 
 
    <h1>This is title</h1> 
 
</div> 
 

Answer 1

вы можете использовать дисплей прогибается это позволяет гибкий контекст для всех его непосредственных детей, и со шлейфом направления устанавливает основную ось, тем самым определяя направление гибких элементы размещены в гибком контейнер

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    text-align: center; 
} 

Answer 2

Просто сделай это, который работает в любом браузере:

div{ 
    height: 400px; 
    width: 800px; 
    background: red; 
    line-height: 400px; 
    text-align: center; 
} 

Свойство line-height указывает высоту линии (которая центрирует ее по вертикали), а text-align:center размещает ее прямо в центре по горизонтали.

Answer 3

<div> 
    <style> 
div { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
}</style> 
<h1>This is title</h1> 
</div> 

С position: fixed установить позицию фиксированного значения, и с top и left оба установлены в 50% вы получите его в середине экрана.

Кода удачи!

Вот еще информация: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 4

.container { 
 
    display: table; 
 
} 
 
.centered { 
 
    display: table-cell; 
 
     height: 400px; 
 
     width: 800px; 
 
     background: red; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    }

<div class="container"> 
 
<div class="centered"> 
 
    <h1>This is title</h1> 
 
</div> 
 
</div>