How can I vertically center a div on any resolution?

Question

I've been trying to center a div and I can't figure out why it isn't working. I tried other solutions I've seen (here and elsewhere), but none worked.

  <div id=story-container>
    <div id="story">
      <span id="introstory">story text</span>
      <button type="button" id="storynext">Click to continue..</button>
    </div>
  </div>

What CSS code can I use to center this div on any resolution the user happens to be on? Thanks in advance!

Please post the css for `story-container` and all the other classes you're using otherwise we can't figure out what any of your classes are doing and how to solve the issue. — Sahil, Aug 18 '19 at 15:08
A complete guide https://css-tricks.com/centering-the-newest-coolest-way-vs-the-oldest-coolest-way/ — ifthenelse, Aug 18 '19 at 15:16

score 3 · Answer 1 · answered Aug 18 '19 at 15:19

There are several ways of centering divs within another div.

Flex

.parent {
  display: flex;
  align-items: center;
  
  height: 500px;
}

.child {
  width: 100px;
  height: 100px;
  background-color: #333;
}

<div class="parent">
  <div class="child"></div>
</div>

Read more on flex here.

Position

.parent {
  position: relative;
  height: 500px;
  top: 0;
}

.child { 
  width: 100px;
  height: 100px;
  background-color: #333;
  position: absolute;
  top: 50%;
  margin-top: -50px;
}

<div class="parent">
  <div class="child"></div>
</div>

As you can see, this way isn't very flexible, so I recommend the first option.

Hope this helps.

UPD: I misunderstood the question, sorry. Updated for vertical.

score 0 · Answer 2 · answered Aug 18 '19 at 15:13

0

Your id of your story-container is not syntaxed correctly, it's missing quotation marks.

Use this: <div id="story-container">

Instead of: <div id=story-container>

answered Aug 18 '19 at 15:13

Daan Seuntjens

880
1
18
37

It worked before without the quotation marks. perhaps i removed them by accident. anyway, thanks for pointing that out! – Infinity Aug 18 '19 at 15:19
1

You can get away with not putting quotes around attributes depending on how they are written (e.g. no spaces, which is why the example above works OK). Here are the details: https://mathiasbynens.be/notes/unquoted-attribute-values - that said, I advise you just add the quotes every time. Checking this out for myself, I noticed that Chrome adds the quotes if you don't. – Charles Wyke-Smith Aug 18 '19 at 15:35

score 0 · Answer 3 · answered Aug 18 '19 at 15:18

0

Vertically

#story-container {
display : flex;
align-items: center;
}

If you want center from all sides use:

#story-container {
display : flex;
align-items: center;
justify-content: center;
}

answered Aug 18 '19 at 15:18

Bhanu

351
2
15

score 0 · Accepted Answer · answered Aug 18 '19 at 15:19

Your first line needs quotation marks around the div id. For example it should be:


    <div id="story-container">

I would recommend making this a flex container and aligning with the following


    #story-container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

Please see a working example in my codepen here:

https://codepen.io/CTBroon/pen/PoYzyLb

score 0 · Answer 5 · answered Aug 18 '19 at 15:28

I'm assuming you want to center the inner div horizontally, not vertically - you don't actually say which.

A simple way to center a div horizontally inside another is to give the inner div a width in % or px, (because divs, as block level elements, normally expand to be as wide as possible), and then apply this css to the inner div:

margin:0 auto;

The 0 is applied to the top and bottom margins, the auto to the horizontal margins. This will center the div horizontally.

   #story-container {
        border:1px solid red;
    }
    #story {
        border:1px solid green;
        width:200px;
        margin:0 auto;
    }

Post again with more detail if this isn't what you need.

How can I vertically center a div on any resolution?

5 Answers5