CSS Vertically & Horizontally Center Div [duplicate]

Answer 1

In your CSS:

.ClassCenter {
    position: absolute;
    left: 50%;
    top: 50%;
}

Source: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Answer 2

If your popup div has a fixed size then you can use this CSS:

position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */

Otherwise you have to fiddle around with display: table-cell; and the like.

Answer 3

Use a position:fixed; for this, use 0 for top, left, right and bottom, and give the div a display:table-cell; also, like this, setting text-align:center; and vertical-align:middle; will make everything inside appear exactly in the middle, without pixel-exact hacks like negative margins.

Answer 4

Is this what you're trying to do? http://jsfiddle.net/Hrwf8/

The key here is to set the left and top styles to 50% and set the margin-left and top to the negative amount of half of the width and height of the div. This of course requires that you have a fixed size for your div.

Answer 5

If the div has an fixed width and height use: (if width=120px and height=80px)

position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */