CSS Vertically & Horizontally Center Div

Question

I have a pop up which contains an ASP.NET form, click the link "Request Information" and the form appears.

However, the pages that have the link "Request Information" to trigger the pop up have a lot of content therefore scrolling is required to see the link.

I need to have the div always centered if a user scrolls to read the content, otherwise if they don't scroll the pop up still appears centered on screen.

The div is positioned absolutely, the whole page width is 960px with margin set to 0 auto.

ninov · Accepted Answer · 2013-01-26T09:46:35.663

17

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 */

edited Jan 26 '13 at 09:46

answered Nov 27 '11 at 21:39

ninov

629
1
6
17

1

This puts the div down in the bottom right corner, not centered. You need to make to margins negative numbers. – Godwin Nov 27 '11 at 21:45
they are negative now... – ninov Nov 27 '11 at 21:50
This answer doesn't make sense if you don't know the width and height of the box (that is the case in 95% of situations). – Kir Mazur Sep 07 '22 at 09:13

score 0 · Answer 2 · edited Nov 30 '12 at 00:44

0

In your CSS:

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

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

edited Nov 30 '12 at 00:44

Core Xii

6,270
4
31
42

answered Nov 30 '12 at 00:24

Alan

101
1
6

That's only going to put the top left corner on the center, the box will still not be centered – davethegr8 Nov 30 '12 at 00:44

score 0 · Answer 3 · 2011-11-27T22:17:07.347

0

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.

edited Nov 27 '11 at 22:17

answered Nov 27 '11 at 21:36

Ok and what values for left and top? – Filth Nov 27 '11 at 21:36

score 0 · Answer 4 · answered Nov 27 '11 at 21:42

0

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.

answered Nov 27 '11 at 21:42

Neil

54,642
8
60
72

score 0 · Answer 5 · answered Nov 27 '11 at 21:43

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.

CSS Vertically & Horizontally Center Div

5 Answers5

Linked

Related