center h1 in the middle of screen

Question

How can I center horizontally and vertically a text? I don't want to use position absolute because I try with it and my other div getting worse. Is there another way to do that ?

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

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

Answer 1

you can use display flex it enables a flex context for all its direct children, and with flex direction establishes the main-axis, thus defining the direction flex items are placed in the flex container

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