CODEWITHSUNDEEP
css
Joe
Joe

Reputation: 1635

How to align DIV vertically & horizontally center

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?

Upvotes: 5

Views: 16077

Answers (5)

Fabian
Fabian

Reputation: 3495

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;
}

​

Upvotes: 0

sandeep
sandeep

Reputation: 92803

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/

Upvotes: 0

SenorAmor
SenorAmor

Reputation: 3345

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.

Upvotes: 7

Bruno Silva
Bruno Silva

Reputation: 3097

Add this to your css:

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

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

Upvotes: 0

driangle
driangle

Reputation: 11779

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

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

Upvotes: 3

Related Questions