center h1 in the middle of screen [duplicate] - html

Question

This question already has answers here:
How do I vertically center text with CSS? [duplicate]
(37 answers)
Closed 7 years ago.
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;
}

Answer 2

Just do this, which works on every browser:
div{
height: 400px;
width: 800px;
background: red;
line-height: 400px;
text-align: center;
}
The line-height property specifies the line height (which centres it vertically), and the text-align:center place it directly in the centre horizontally.

Answer 3

<div>
<style>
div {
position: fixed;
top: 50%;
left: 50%;
}</style>
<h1>This is title</h1>
</div>
With position: fixed you set the position to a fixed value, and with top and left both set to 50% you'll get it in the middle of the screen.
Good luck coding!
Here is some more information: 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>