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>

Do you want the `h1` centered within the `div` or the `div` centered within the viewport/screen? Please clarify, — Marc Audet, Jan 03 '16 at 19:23

elreeda · Accepted Answer · 2016-01-03T19:23:00.330

20

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;
}

edited Jan 03 '16 at 19:23

answered Jan 03 '16 at 19:18

elreeda

4,525
2
18
45

2

Hopefully OP doesn't need to support internet explorer. – John Dvorak Jan 03 '16 at 19:21
1

IE 10/11 is pretty fine with flexbox. – Paulie_D Jan 03 '16 at 20:21

Mmm Donuts · Answer 2 · 2016-01-03T19:34:26.000

5

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.

edited Jan 03 '16 at 19:34

answered Jan 03 '16 at 19:29

Mmm Donuts

9,551
6
27
49

it work also for divs ? because i put this in my website it didnt work – Dina Jan 03 '16 at 19:33
2

@Dina divs are block elements, so no. If you want it to work on a div, set the div style to `display: inline`. You should use `span` for inline text. – Mmm Donuts Jan 03 '16 at 19:36

score 1 · Answer 3 · answered Jan 03 '16 at 19:35

<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/

score -1 · Answer 4 · answered Jan 03 '16 at 20:11

.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>

center h1 in the middle of screen

4 Answers4