How can I vertically center a div on any resolution? [duplicate] - html

Question

This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 3 years ago.
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!

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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

Answer 5

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.