css: how to center box div element directly in center?

Question

when i use top:50% and left:50%

the box is not directly in center. of course when the box is very small, it appears to be centered. but when box is a bit big, it looks as if it's not centered.

how can i resolve this ?

Answer 1

You can assign the box a fixed width and heigth, and then give it's margin-top and margin-left properties the negative half of the height and width.

EDIT: Example

div.centered {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -200px;
    margin-left: -250px;
}

Answer 2

#content {
  width: 100% ;
  margin-left: auto ;
  margin-right: auto ;
}

Answer 3

Horizontal: Use a fixed width and

margin-left: auto;
margin-right: auto;

vertical: That's not that easy. You could use

display: table-cell

for the surrounding DIV and then give it a

vertical-align: center.

Answer 4

top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.

Example for a 300x200 box:

width: 300px;
height: 200p;x
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;

Answer 5

One way is to assign a specific width to the box, then halve the remaining distance on each (left and right) side. This may be easier if you use percentages instead of pixel widths, e.g.,

<div style="margin-left:25%; margin-right:25%">...</div>

This leaves 50% width for the div box.

Answer 6

body { text-align: center; }

#box {
  width: 500px; /* or whatever your width is */
  margin: 10px auto;
  text-align: left;
}

The above would centre your box centrally horizontally on the page with a 10px margin at the top and bottom (obviously that top/bottom margin can be altered to whatever you want). The 'text-align' on the body is required for IE, which as usual doesn't quite get the hang of it otherwise. You then need the left text-align on your box (unless you want text it in centred too) to counteract the text-align center on the body.

Trying to centre vertically is just about impossible using pure CSS though. Though there's a vertical-align in CSS, it doesn't work like the HTML vertical align in tables, so in CSS 2 there's no in-built vertical align like the HTML one. The problem is that you're dealing with an unknown height - even if you know the height of your box, the height of the page is unknown, or rather what are you trying to fix the box in the centre of? The page? The viewport? The visible screen area's going to be different for everyone, depending on their screen resolution, browser, and all of the browsers interpret the height differently.

There are various methods that claim to have solved the problem, but usually they don't reliably work in all browsers. I found this one the other day, which doesn't seem bad, but it doesn't work in Google Chrome (works in Firefox and Opera, but I didn't get chance to check out IE). There's an interesting discussion on the problem though on this thread on Webmaster World that summarises the various methods and pros and cons of them and is well worth a look.

Edit: Dav's solution in the first response works okay as long as you (or the visitor to the site) don't increase the font size or line height. The container will be centred, but as soon as the font size is increased or more content added, it'll overflow the container.