This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Using margin:auto to vertically-align a div
(15 answers)
Why don't margin-top: auto and margin-bottom:auto work the same as their left and right counterparts?
(2 answers)
Closed 4 months ago.
Here is code:
.HUD {
height: 100%;
width: 100%;
overflow: hidden;
}
.Smart_HudWarp{
display: block;
height: fit-content;
margin-top: auto;
margin-bottom: auto;
}
<div class="HUD">
<div class="Smart_HudWarp">
some elements....
</div>
</div>
I'm trying to center div inside another one, the problem is - margins doesn't show up, what i'm missing?
Although it's hard to say without the rest of the content of your html and css, i suspect the reason the auto is not working is because 100% is not considered a "static" height or width for the parent div. Margin auto doesn't actually assign a value to the margins. Instead, it allows the browser to choose the values for the margin. Browsers assign the values margin-top: 0; margin-bottom: 0; and then horizontally center the object within the parent when the shorthand property margin:auto; is given. So when you specify margin-top: auto; margin-bottom: auto; all that's being assigned is margin-top: 0; margin-bottom: 0;
a simple solution would be to use flexbox. I personally don't like using position: relative/absolute because it can be quite finicky, but that's just me. Note that flexbox comes with its own quirks, too.
.parent {
background: navy;
display: flex;
align-items: center;
justify-content: space-around;
height: 100vh; /* this makes the height a "static" value, while also covering a height equal to the whole height of the viewport */
width: 100%;
}
.child {
background: pink;
padding: 4vh;
}
<div class="parent">
<div class="child">
Hello World!
</div>
</div>
Related
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!
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.
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
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>
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;
}
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.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 4 years ago.
I've been on this for a while now and tried a lot of the solutions I've seen across different Stackoverflow questions / blogposts / ... But I honestly can't figure out what's going wrong.
I've got a flexed div with two divs in there. The top div A has a fixed height, the other div B fills the rest using flex: 1;. If the screen is resized and it's smaller than the height of A + B together, then B will start overflowing. I want it to scroll, but I also want the content to be fully visible when scrolling. For some reason which I can't figure out, the content renders out of the top of div B as you can see in this screenshot of my fiddle:
Some of the previously asked questions got me somewhere. For example setting the body to height: auto;, but then when my screen is bigger than A + B it can't be center aligned anymore. min-height: 0; also doesn't seem to help in this case.
How can I make sure my container overflows but will fully show the content of it?
You can solve the issue by giving .second:
flex-basis: auto;
flex-shrink: 0;
Or, with shorthand: flex: 1 0 auto;
Working example:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.second {
flex: 1 0 auto;
background: blue;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 0;
overflow: auto;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
min-height: 0;
/* added this to make it obvious. Obviously, not needed */
padding: 2rem 0;
}
.container-child {
height: 110px;
background: green;
width: 100%;
}
.container-child:not(:last-child) {
margin-bottom: 30px;
}
<div class="second">
<div class="container">
<div class="container-child"></div>
<div class="container-child"></div>
<div class="container-child"></div>
</div>
</div>
I added some top and bottom padding to .container to make it obvious that it's working - but it's not needed.
Now let's look at why this is happening. When you apply .second { flex:1; } it means:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
... which allows it to have a smaller size than its contents.
Whenever you have a bigger child centered in a smaller parent, the browser won't provide a scrollbar to top (or to left, when horizontal), because then , if the top of the parent and the top of the child coincide and the child is bigger than the parent, the child is no longer centered, is it?
The same happens when using other centering techniques and you center a bigger child in a smaller parent.
To fix the problem, you need to prevent the child from outgrowing the parent.
In this case, it meant sizing .second based from its content (flex-basis: auto) and not allowing it to shrink: (flex-shrink: 0;).
To better visualize the issue, consider this example:
.left, .right {
position: relative;
border: 1px solid red;
padding: 1rem 5rem;
}
.left {
left: -5rem;
}
.right {
right: -5rem;
}
<div class="left">
I'm taken left
</div>
<div class="right">
I'm taken right
</div>
If the browser provided scrollbars to allow you to scroll to beginning of .left, it would mean that left: -5rem did not apply. I hope that makes sense, I can't explain it better.
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 years ago.
I need to align container in the centre as well as in the middle of the body.
If I add margin-top it adds a white space above the container div and shifts the background image downwards too.
I would prefer everything in percentage.
body {
margin: 0px;
height: 100%;
background-image: url("../Images/LogIn/Background.jpg");
background-size: 100% 100%;
}
html {
height: 100%;
}
.Container {
margin: auto;
width: 60%;
height: 80%;
background-color: white;
border-radius: 20px;
}
<div class="Container">
</div>
Put the following styles on the bottom to align your child div in the center:
body {
display: flex;
justify-content: center;
align-items: center;
}
.container{
margin:auto;
width: 50%
}
Any container with a width and relative position when styled with margin auto will automatically center inside a relatively positioned parent div (like body) - if it has content.
<style>
.container{
margin:auto;
width: 50%;
background-color: grey;
}
</style>
<body>
<div class="container">
<p> text </p>
</div>
</body>
Also as a sidenote, you should avoid styling the body at all.
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 5 years ago.
So i'm using CSS flex to create vertically centered Modal popups ( align-items: center; ). The issue is that when the Modal is taller than the viewport (and is scrollable), the Flex prioritizes the 'centered-ness' and thus makes the top of the modal inaccessible.
Has anyone found ways around this? I could use a media query to make all Modals flex-start aligned, however i still want smaller modals to be vertically centered.
I had thought of trying to make the modal flex-shrink; to always fit 100% of the viewport, but it needs to scroll (and allow content to fit in further down the page) so not sure!
.outer {
display: flex;
align-items: center;
}
Thanks to #Pete for answering this:
The solution was setting max-height: 100%; and overflow: auto; (i had previously had overflow: visible; which caused issue.
I also found another method:
by placing the following flex properties on the 'outer outer' container (in this case, we're using ReactModal, so there's ReactModalPortal).
So we do
```.ReactModalPortal {
display: flex;
align-items: flex-start;
.innerContainer {
display: flex;
align-items: center;
}
}
```
i suppose by putting flex-start on the parent, it always ensures the content 'begins' at the top of the window.
Here you go
.parent{
top:50px;
}
.parent,
.child {
position: relative;
width: 50px;
height: 50px;
margin: auto;
background: #CCC;
}
.child {
position: relative;
width: 25px;
height: 100px;
margin: auto;
background: #000;
top: 50%;
transform: translate(0, -50%);
}
<div class="parent">
<div class="child"></div>
</div>
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I am trying to vertically center two <p> elements.
I followed the tutorial at phrogz.net but still the elements get placed above the div, below the div, top-aligned within the div.
I would try something else but most of the questions here just point back to that tutorial.
This snippet is for a banner that is on the top of a web page.
.banner {
width: 980px;
height: 69px;
background-image: url(../images/nav-bg.jpg);
background-repeat: no-repeat;
/* color: #ffffff; */
}
.bannerleft {
float: left;
width: 420px;
text-align: right;
height: 652px;
line-height: 52px;
font-size: 28px;
padding-right: 5px;
}
.bannerright {
float: right;
width: 555px;
text-align: left;
position: relative;
}
.bannerrightinner {
position: absolute;
top: 50%;
height: 52px;
margin-top: -26px;
}
<div class="banner">
<div class="bannerleft">
I am vertically centered
</div>
<div class="bannerright">
<div class="bannerrightinner">
<p>I should be</p>
<p>vertically centered</p>
</div>
</div>
<div class="clear">
</div>
</div>
How to Center Elements Vertically, Horizontally or Both
Here are two ways to center divs within divs.
One way uses CSS Flexbox and the other way uses CSS table and positioning properties.
In both cases, the height of the centered divs can be variable, undefined, unknown, whatever. The height of the centered divs doesn't matter.
Here's the HTML for both:
<div id="container">
<div class="box" id="bluebox">
<p>DIV #1</p>
</div>
<div class="box" id="redbox">
<p>DIV #2</p>
</div>
</div>
CSS Flexbox Method
#container {
display: flex; /* establish flex container */
flex-direction: column; /* stack flex items vertically */
justify-content: center; /* center items vertically, in this case */
align-items: center; /* center items horizontally, in this case */
height: 300px;
border: 1px solid black;
}
.box {
width: 300px;
margin: 5px;
text-align: center;
}
DEMO
The two child elements (.box) are aligned vertically with flex-direction: column. For horizontal alignment, switch the flex-direction to row (or simply remove the rule as flex-direction: row is the default setting). The items will remain centered vertically and horizontally (DEMO).
CSS Table and Positioning Method
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
.box {
width: 300px;
padding: 5px;
margin: 7px auto;
text-align: center;
}
DEMO
Which method to use...
If you're not sure which method to use, I would recommend flexbox for these reasons:
minimal code; very efficient
as noted above, centering is simple and easy (see another example)
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.
Browser support
Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
Add the following:
display:table; to bannerRight
display:table-cell; and
vertical-align:middle; to bannerrightinner
I have not tried this, please give me feedback if it does not work. ;)
EDIT: forgot to mention: take 'float' and 'position' properties off