How to vertically center <div> inside the parent element with CSS?
Solution 1
The best approach in modern browsers is to use flexbox:
#Login {
display: flex;
align-items: center;
}
Some browsers will need vendor prefixes. For older browsers without flexbox support (e.g. IE 9 and lower), you'll need to implement a fallback solution using one of the older methods.
Recommended Reading
Solution 2
This can be done with 3 lines of CSS and is compatible back to (and including) IE9:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Example: http://jsfiddle.net/cas07zq8/
Solution 3
You can vertically align a div in another div. See this example on JSFiddle or consider the example below.
HTML
<div class="outerDiv">
<div class="innerDiv"> My Vertical Div </div>
</div>
CSS
.outerDiv {
display: inline-flex; // <-- This is responsible for vertical alignment
height: 400px;
background-color: red;
color: white;
}
.innerDiv {
margin: auto 5px; // <-- This is responsible for vertical alignment
background-color: green;
}
The .innerDiv
's margin must be in this format: margin: auto *px;
[Where, *
is your desired value.]
display: inline-flex
is supported in the latest (updated/current version) browsers with HTML5 support.
It may not work in Internet Explorer :P :)
Always try to define a height for any vertically aligned div (i.e. innerDiv) to counter compatibility issues.
Solution 4
I'm pretty late to the party, but I came up with this myself and it's one of my favorite quick hacks for vertical alignment. It's crazy simple, and easy to understand what's going on.
You use the :before
css attribute to insert a div into the beginning of the parent div, give it display:inline-block
and vertical-align:middle
and then give those same properties to the child div. Since vertical-align
is for alignment along a line, those inline divs will be considered a line.
Make the :before
div height:100%
, and the child div will automatically follow and align in the middle of a very tall "line."
.parent:before, .child {
display:inline-block;
vertical-align:middle;
}
.parent:before {
content:""; // so that it shows up
height:100%; // so it takes up the full height
}
Here's a fiddle to demonstrate what I'm talking about. The child div can be any height, and you never have to modify its margins/paddings.
And here's a more explanatory fiddle.
If you're not fond of :before
, you can always manually put in a div.
<div class="parent">
<div class="before"></div>
<div class="child">
content
</div>
</div>
And then just reassign .parent:before
to .parent .before
Solution 5
If you know the height, you can use absolute positioning with a negative margin-top
like so:
#Login {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px; /* width / -2 */
margin-top:-200px; /* height / -2 */
}
Otherwise, there's no real way to vertically center a div with just CSS
Related videos on Youtube
Crays
Updated on October 03, 2020Comments
-
Crays over 3 years
I'm trying to make a small username and password input box.
I would like to ask, how do you vertically align a div?
What I have is:
<div id="Login" class="BlackStrip floatright"> <div id="Username" class="floatleft">Username<br>Password</div> <div id="Form" class="floatleft"> <form action="" method="post"> <input type="text" border="0"><br> <input type="password" border="0"> </form> </div> </div>
How can I make the div with id Username and Form to vertically align itself to the center? I've tried to put:
vertical-align: middle;
in CSS for the div with id Login, but it doesn't seem to work. Any help would be appreciated.
-
sagarpatidar over 10 yearsHave a look at. stackoverflow.com/questions/396145/…
-
-
Sambhav Sharma about 9 yearsM not so good with CSS, but out of so many solutions I came across, this one worked for me the best.
-
Steve Breese about 9 yearsThis doesn't work in IE browser.
-
Steve Breese about 9 yearsworking jsFiddle jsfiddle.net/breese/3puHE/10
-
Barun about 9 yearswhy is the my link above not working?
-
Steve Breese about 9 yearsAll the boxes (HTML, JavaScript, CSS) are empty.
-
atilkan almost 9 yearsdisplay:flex does the job without breaking something.
-
atilkan almost 9 years@SteveBreese stop using ie. breakupwithie8.com
-
user over 8 yearsDoesn't work in Firefox (tested on version 40), although works with
img
tag in place ofdiv
. -
Amit Kumar over 8 yearsThis is awesome, just 3 lines and it worked like a charm.
-
serge over 8 yearsnot compatible with IE9
-
AuRise over 8 yearsThis is my personal favorite, especially when I can use it as a LESS or SASS mix-in.
-
davidneedham over 8 yearsThis solution only works if you add the parts noted as being responsible for vertical alignment, AND the height on the outerDiv. Without the height, it doesn't work.
-
Harry Bosh about 8 yearsBreaks responsive design
-
meshy almost 8 yearsTo align horizontally, I added
justify-content: center
as well. (Not quite the same scenario though.) -
Salketer over 7 yearsThat's brilliant! First time I see it and I really wonder why as it's perfect. I've modified the CSS selector to .parent > * so I don't need a child selector anymore. That means I can use the class everywhere! I'd +1000
-
Adam Copley over 7 yearsCan you provide an example of how and why it breaks "responsive design" as a whole? Whether or not it breaks responsive design is a matter of your project's structure already in my opinion.
-
Nishant over 7 yearsWOAH .. thanks man, i had to remove flexbox from a slider because of it inserting extra divs between flex parent & child, this was the perfect solution.
-
Sasha Chirico about 7 yearsAwesome! But, why we need to insert a div before, instead to vertical-align directly the child div? (I see it not work, but why?)
-
David Rector about 7 yearsI was able to use this technique to include a secondary child div inside of the "child" div in the example. A media rule in my CSS file lets me then show the new child-child content to the right of the original content on wide screens and below it and smaller on narrow screens, and it's all still vertically centered. In other words, this works for me with more than just some text in that "child" div.
-
thutt almost 7 yearsThere is also
display: inline-flex
in case you want the parent element to stay, well, inline :) -
Danny Sullivan over 6 yearsTo stack divs one on top of the other, use
flex-direction: column
-
Bartando over 6 yearsFlex is the worst method I've ever seen, so much pain with Bootstrap that I would more likely use Javascript over this ...
-
Gabriel over 5 yearsHow about when you don't know the height?
-
robocat about 5 yearsNote: be careful if you are trying to centre anything with a 'display: inline-box'. The line-height of the contents can cause extra space below the inline-box, and the result is that the child is aligned slightly above centre. I am not sure what part of the html spec causes this, but I found it to be unobvious and it took a while to work out the reason that the children of the flexbox were not properly centred vertically.
-
Ron16 over 4 yearswon't work on IE.
-
Juyal Jee almost 3 yearsFor me, just 2 more properties were required to make it work,
display: flex; flex-direction: column;
-
user5402026 about 2 yearsYou literally saved my life. My boss, CJ, said if I don't get this done today I'm in big trouble. Also @meshy that worked like a charm ty