How to vertically center
inside the parent element with CSS?

Question

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.

Have a look at. http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — sagarpatidar, Oct 19 '13 at 05:21

score 282 · Accepted Answer · edited May 23 '17 at 12:18

282

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

edited May 23 '17 at 12:18

Community

1
1

answered Apr 30 '10 at 10:59

Andy E

338,112
86
474
445

13

To align horizontally, I added `justify-content: center` as well. (Not quite the same scenario though.) – meshy May 23 '16 at 15:22
There is also `display: inline-flex` in case you want the parent element to stay, well, inline :) – thutt Aug 03 '17 at 13:50
6

To stack divs one on top of the other, use `flex-direction: column` – Danny Sullivan Aug 30 '17 at 09:41
Flex is the worst method I've ever seen, so much pain with Bootstrap that I would more likely use Javascript over this ... – Bartando Sep 28 '17 at 10:23
Note: 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. – robocat May 16 '19 at 05:29
won't work on IE. – Ron16 Sep 16 '19 at 09:35
For me, just 2 more properties were required to make it work, ```display: flex; flex-direction: column;``` – Juyal Jee Aug 10 '21 at 07:48
1

You 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 – user5402026 Mar 02 '22 at 19:55

score 112 · Answer 2 · answered Mar 24 '15 at 03:33

112

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/

credit

answered Mar 24 '15 at 03:33

patmood

1,565
1
12
15

This is awesome, just 3 lines and it worked like a charm. – Amit Kumar Sep 13 '15 at 11:19
This is my personal favorite, especially when I can use it as a LESS or SASS mix-in. – AuRise Nov 11 '15 at 04:13
7

Breaks responsive design – Harry Bosh Mar 17 '16 at 22:54
2

Can 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. – Adam Copley Oct 12 '16 at 12:51
2

WOAH .. 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. – Nishant Jan 03 '17 at 07:26
How about when you don't know the height? – Gabriel Nov 04 '18 at 18:38

score 83 · Answer 3 · edited May 03 '16 at 21:19

83

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.

edited May 03 '16 at 21:19

Rob Kielty

7,958
8
39
51

answered Dec 27 '13 at 11:45

Lalit Kumar Maurya

5,475
2
35
29

M not so good with CSS, but out of so many solutions I came across, this one worked for me the best. – Sambhav Sharma Mar 23 '15 at 04:51
3

This doesn't work in IE browser. – Steve Breese Apr 09 '15 at 16:34
display:flex does the job without breaking something. – atilkan Jun 04 '15 at 09:29
24

@SteveBreese stop using ie. http://breakupwithie8.com/ – atilkan Jun 04 '15 at 09:30
2

not compatible with IE9 – serge Oct 21 '15 at 13:47
1

This 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. – davidneedham Dec 20 '15 at 03:57

Overcode · Answer 4 · 2016-09-23T13:22:12.863

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

That'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 — Salketer, Sep 22 '16 at 06:43
Awesome! But, why we need to insert a div before, instead to vertical-align directly the child div? (I see it not work, but why?) — Sasha Chirico, Mar 13 '17 at 17:41
I 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. — David Rector, Apr 21 '17 at 06:32

score 11 · Answer 5 · answered Apr 30 '10 at 11:00

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

score 7 · Answer 6 · answered Nov 29 '15 at 11:44

7

In my firefox and chrome work this:

CSS:

display: flex;
justify-content: center;     // vertical align
align-items: center;         // horizontal align

answered Nov 29 '15 at 11:44

Kamil Kot

71
1
1

score 3 · Answer 7 · answered Apr 30 '13 at 12:28

3

I found this site useful: http://www.vanseodesign.com/css/vertical-centering/ This worked for me:

HTML

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS

#parent {
    padding: 5% 0;
}

#child {
    padding: 10% 0;
}

answered Apr 30 '13 at 12:28

testpattern

2,382
1
25
29

score 3 · Answer 8 · edited May 23 '17 at 10:31

@GáborNagy's comment on another post was the simplest solution I could find and worked like a charm for me, since he brought a jsfiddle I'm copying it here with a small addition:

CSS:

#wrapper {
    display: table;
    height: 150px;
    width: 800px;
    border: 1px solid red;
}

#cell {
    display: table-cell;
    vertical-align: middle;
}

HTML:

<div id="wrapper">
    <div id="cell">
        <div class="content">
            Content goes here
        </div>
    </div>
</div>

If you wish to also align it horizontally you'd have to add another div "inner-cell" inside the "cell" div, and give it this style:

#inner-cell{
      width: 250px;
      display: block;
      margin: 0 auto;
}

score 1 · Answer 9 · answered Jun 11 '14 at 18:22

Vertically aligning has always been tricky.

Here I have covered up some method of vertically aligning a div.

http://jsfiddle.net/3puHE/

HTML:

<div style="display:flex;">

<div class="container table">
<div class="tableCell">
<div class="content"><em>Table</em> method</div>
</div>
</div>

<div class="container flex">
<div class="content new"><em>Flex</em> method<br></div>
</div>

<div class="container relative">
<div class="content"><em>Position</em> method</div>
</div>

<div class="container margin">
<div class="content"><em>Margin</em> method</div>
</div>

</div>

CSS:

em{font-style: normal;font-weight: bold;}
.container {
    width:200px;height:200px;background:#ccc;
    margin: 5px; text-align: center;
}
.content{
    width:100px; height: 100px;background:#37a;margin:auto;color: #fff;
}
.table{display: table;}
.table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;}
.flex{display: flex;}
.relative{position: relative;}
.relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.margin > div {position:relative; margin-top: 50%;top: -50px;}

working jsFiddle https://jsfiddle.net/breese/3puHE/10/ – Steve Breese Apr 09 '15 at 17:26 — Steve Breese, Apr 09 '15 at 17:26
why is the my link above not working? – Barun Apr 10 '15 at 08:47 — Barun, Apr 10 '15 at 08:47
All the boxes (HTML, JavaScript, CSS) are empty. – Steve Breese Apr 10 '15 at 16:09 — Steve Breese, Apr 10 '15 at 16:09

score 1 · Answer 10 · answered Dec 11 '14 at 16:27

1

http://jsfiddle.net/dvL512e7/

Unless the aligned div has fixed height, try using the following CSS to the aligned div:

{
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
}

answered Dec 11 '14 at 16:27

grebenyuksv

1,729
2
12
9

Doesn't work in Firefox (tested on version 40), although works with `img` tag in place of `div`. – user Aug 25 '15 at 20:36

score 1 · Answer 11 · answered Mar 17 '16 at 23:09

1

I needed to specify min-height

#login
    display: flex
    align-items: center
    justify-content: center
    min-height: 16em

answered Mar 17 '16 at 23:09

Harry Bosh

3,611
2
36
34

score 0 · Answer 12 · answered Apr 30 '10 at 11:13

0

if you are using fix height div than you can use padding-top according your design need. or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.

answered Apr 30 '10 at 11:13

Kali Charan Rajput

12,046
10
35
46

WasiF · Answer 13 · 2022-09-05T06:24:00.333

0

Centering the child elements in a div. It works for all screen sizes

#parent {
  background-color: red;
  height: 160px;
  
  display: flex;
  
  /*vertical-align */
  align-items: center;
  
   /*horizontal align*/
  justify-content: center;
}
    
#child {
  background-color: orange;
  height: 20px;
  padding: 10px;
}

<div id="parent">
   <div id="child">Content here</div>
</div>

edited Sep 05 '22 at 06:24

answered Jan 30 '18 at 13:53

WasiF

26,101
16
120
128

score 0 · Answer 14 · answered Jun 08 '18 at 14:56

0

simplest way to center your div element is to use this class with following properties.

.light {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

answered Jun 08 '18 at 14:56

parag patel

2,933
1
10
22

decaff · Answer 15 · 2015-01-20T09:20:41.070

I found a way that works great for me. The next script inserts an invisible image (same as bgcolor or a transparant gif) with height equal to half the size of the white-space on the screen. The effect is a perfect vertical-alignment.

Say you have a header div (height=100) and a footer div (height=50) and the content in the main div that you would like to align has a height of 300:

<script type="text/javascript" charset="utf-8">
var screen = window.innerHeight;
var content = 150 + 300;
var imgheight = ( screen - content) / 2 ;
document.write("<img src='empty.jpg' height='" + imgheight + "'>"); 
</script>

You place the script just before the content that you want to align!

In my case the content I liked to align was an image (width=95%) with an aspect ratio of 100:85 (width:height).Meaning the height of the image is 85% of it's width. And the Width being 95% of the screenwidth.

I therefore used:

var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth ));

Combine this script with

<body onResize="window.location.href = window.location.href;">

and you have a smooth vertical alignment.

Hope this works for you too!

score -3 · Answer 16 · edited Sep 14 '15 at 04:41

-3

have you try this one?

.parentdiv {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
 height: 300px; // at least you have to specify height
}

hope this helps

edited Sep 14 '15 at 04:41

HaveNoDisplayName

8,291
106
37
47

answered Sep 14 '15 at 04:19

Orangorangan

1

score -5 · Answer 17 · answered Apr 30 '10 at 10:59

-5

divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.

answered Apr 30 '10 at 10:59

Not Available

3,095
7
27
31

How to vertically center
inside the parent element with CSS?

17 Answers17

HTML:

CSS:

Linked

Related

How to vertically center inside the parent element with CSS?

17 Answers17

HTML:

CSS:

Linked

Related

How to vertically center
inside the parent element with CSS?