How to align DIV vertically & horizontally center

Question

Can someone help me to get div id "loader" to float in the center of div class "Window". Thanks.

<div id="someid" class="Window">
   <div id="loader"></div>
</div>

UPDATE* I need to center it in the absolute middle of a block. Lets say class "Window" was 400px high. How do I get "loader to float in the center (height/width) of that?

I need to center it in the absolute middle of a block. Lets say class "Window" was 400px high. How do I get "loader to float in the center (height/width) of that? — Joe, Feb 22 '12 at 17:27
something like this? http://jsfiddle.net/sfKR2/ I'm going to edit my answer.. — Fabian, Feb 22 '12 at 17:34
Close Fabian. SenorAmor got it close to what I needed. Thanks tho :) — Joe, Feb 22 '12 at 17:44

score 7 · Accepted Answer · answered Feb 22 '12 at 17:29

7

Apply the following CSS to "loader":

position: relative
top: 50%
margin: -{E}px auto auto auto

where {E} is half the height of "loader"

Hope this helps.

answered Feb 22 '12 at 17:29

SenorAmor

3,351
16
27

Can you do margin: -25% auto auto auto and not care how tall loader is? – n8wrl Feb 22 '12 at 17:38
Not if you still want it to be centered vertically. The `top: 50%` moves the interior div down 50% of the height of its parent div. Then, the `margin: -{E}px` part moves the interior div back up. We move it half of its height so it stays centered vertically. – SenorAmor Feb 22 '12 at 18:04
This does not appear to work well when used inside a wrapper which has the width and height set to 100%. – Andrew S Jan 03 '13 at 16:24

score 3 · Answer 2 · answered Feb 22 '12 at 17:21

3

#someid.Window{
   // give this some width
   width: 100%
}

#loader{
    // give width and margin auto on the sides
    width: 100px;
    margin: 0 auto;
}

answered Feb 22 '12 at 17:21

driangle

11,601
5
47
54

I need to center it in the absolute middle of a block. Lets say class "Window" was 400px high. How do I get "loader to float in the center (height/width) of that? – Joe Feb 22 '12 at 17:27
k, can you change your question to mention that you want to center the `#loader` div horizontally *and* vertically. – driangle Feb 22 '12 at 17:28

score 0 · Answer 3 · answered Feb 22 '12 at 17:21

0

Add this to your css:

#loader {
  width: 123px;
  margin:0 auto;
}

This will make your left and right margins be calculated automatically.

answered Feb 22 '12 at 17:21

Bruno Silva

3,077
18
20

Fabian · Answer 4 · 2012-02-22T17:35:06.597

0

http://jsfiddle.net/sfKR2/

#someid {
    width:200px;
    height:200px;
}
#loader {
    position: relative;
    height:80px;
    width: 80px;
    top: 50%;
    margin-top: -40px; /* half of the height */
    margin-left: auto;
    margin-right: auto;
}

edited Feb 22 '12 at 17:35

answered Feb 22 '12 at 17:22

Fabian

3,465
4
34
42

score 0 · Answer 5 · answered Feb 22 '12 at 17:33

write this:

.window{
    height:400px;
    width:400px;
    background:red;
    vertical-align:middle;
    line-height:400px;
    text-align:center;
}
#loader{
    width:20px;
    height:20px;
    background:green;
    display:inline-block;
    vertical-align:middle;
}

Check this http://jsfiddle.net/dxPfz/

How to align DIV vertically & horizontally center

5 Answers5