Trying to center div horizontally and vertically in screen

Question

I'm trying to make a div for my landing page of my website center in the very center of the screen, but it is not working.

Here is my code

CSS:

.centerDiv{
width:800px;
margin:0 auto;
border-radius: 5px;
background:#111;
padding:10px;}

HTML:

<div id="centerDiv" class="centerDiv">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>

Thanks.

Im not super worried about ie7 support, although ie8 would be nice. — , Jan 10 '12 at 22:28

score 32 · Accepted Answer · edited Jun 20 '20 at 09:12

32

Note: If you're trying to center a div horizontally and vertically I would suggest looking into flexbox. You'll still need to provide fallback support, but flexbox is the future and it's amazing.

Update: flexbox is supported by all modern browsers now.

You need to give the div a static width and height first of all.

Second, you have to set position: absolute; and left: 50%; top: 50%; then you must do a margin-left and margin-top that are HALF of the height and width. It will then display correctly.

CSS:

.centerDiv{
  width: 800px;
  border-radius: 5px;
  background: #ccc;
  padding: 10px;
  height: 50px;
  position: absolute;
  margin-top: -25px;
  margin-left: -400px;
  top: 50%;
  left: 50%;
}

http://jsfiddle.net/wJ7dY/

P.S. I changed your styling a bit so you could actually read the text. Hope this helps!

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 10 '12 at 22:32

Klikster

1,154
12
24

3

Glad it helped. Keep in mind if you add more text you'll need to adjust the `height:50px;` and `margin-top:-25px;` accordingly. Margin-top should **ALWAYS** be half of what the total height is! (Same with `width` and `margin-left`.) – Klikster Jan 10 '12 at 22:39
+1 as works in IE7 and Compatibility View Mode. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Feb 07 '14 at 08:47
If you dont want to fix a height and width and want your div to adapt to different screen sizes; here's an easier way to achieve this: [jsfiddle.net/NT8Mn](http://jsfiddle.net/NT8Mn) – pratik Mar 27 '14 at 12:18

0b10011 · Answer 2 · 2012-10-15T16:04:59.993

17

This code (demo) allows for any width and height to be set, without having to update any other properties (e.g. top = height / 2) or relying on techniques that aren't well-supported (e.g. display:table;. The one downside is support for older IE versions is lacking. Combining this with another solution for IE only is probably you're best bet.

The CSS:

.absoluteCenter {
 /* Must manually set width/height */
 width:800px;
 height:500px;

 /* The magic centering code */
 margin:auto;
 position:absolute;
 top:0;bottom:0; /* Aligns Vertically - Remove for Horizontal Only */
 left:0;right:0; /* Aligns Horizontally - Remove for Vertical Only  */

 /* Prevent div from overflowing main window */
 max-width:100%;
 max-height:100%;
 overflow:auto;
}

/* IE 7 and Below */
:first-child+html .absoluteCenter,
* html .absoluteCenter {
 /* Place code here to override all above values, and add IE friendly centering */
}

And the HTML:

<div class="absoluteCenter">
 Content of DIV
</div>

edited Oct 15 '12 at 16:04

answered Jan 10 '12 at 22:31

0b10011

18,397
4
65
86

Thank you very much. I'll definitely keep this code saved. For the time being I'm going to use the static width/height just to be safe with older versions – Jan 10 '12 at 22:37
*:first-child+html .absoluteCenter, * html .absoluteCenter {/* Static Code Here */} -- And you're welcome :) – 0b10011 Jan 10 '12 at 22:40
did not work for me without static width/height. what I'm doing wrong? http://jsfiddle.net/Victornpb/2X6M2/1/ – Vitim.us Oct 15 '12 at 01:47
@Vitim.us You're absolutely right, I think I just explained this solution poorly (or wasn't in the right mind when I answered). Anyway, I've updated the answer with a more correct explanation and a few improvements (e.g. adds scrollbar if window is smaller than centered div). AFAIK, it's not possible (at least with current browsers) to have a fluid width/height `div` centered horizontally and vertically (although it [is possible with an `img`](http://stackoverflow.com/a/6284195/526741)). – 0b10011 Oct 15 '12 at 16:09
1

@bfrohs thanks anyway, I like css but I just can't understand the lack of centering content. like `box-align-vertical: middle;` `box-align-horizontal: center;` and `text-align-vertical: middle;` we're stuck with container tricks, tables, negative margins, line heights, etc... eww – Vitim.us Oct 15 '12 at 19:02
this is the best answer. – arg20 May 15 '13 at 13:05
the display: table & table-cell is much more modern. You should use that one. – Danny van Holten Jul 30 '14 at 21:21

score 5 · Answer 3 · edited May 30 '12 at 02:10

What you're looking for is display:table and display:table-cell. This option should vertically align the #center element in the #parent element regardless of the height of the #center element. I beleive you require a height on the #parent element though.

HTML

<div id="parent">
<div id="center">
   <h1>Title</h1>
   <p>Text will go here.</p>
</div>
</div>

CSS

#parent{
display: table;
width: /* Your width */;
height: /* Your height */;
}

#center{
position: relative;
display: table-cell;
width: /* Your width */;
height: /* Your height */;
vertical-align: middle;
margin: 0 auto;
}

I just used this yesterday, using display:table on the body. This technique should be compatible through to IE8.

score 1 · Answer 4 · answered Jan 10 '12 at 22:29

Try the following:

 .centerDiv{
     position: absolute;
     top: 50%;
     height: 400px;
     margin-top: -200px; /* Half of the height */
     left: 50%;
     width:800px;
     margin-left: -400px; /* Half of the width */
     border-radius: 5px;
     background:#111;
     padding:10px;
 }

score 1 · Answer 5 · answered Jan 10 '12 at 22:31

1

set margin to auto instead of 0 auto and you need a height. I think 100% for your purpose.

answered Jan 10 '12 at 22:31

Sven Bieder

5,515
2
21
27

Trying to center div horizontally and vertically in screen

5 Answers5

Linked

Related