CODEWITHSUNDEEP
cssinternet-explorer-7
Rupam Datta
Rupam Datta

Reputation: 1889

Center a div both vertically and horizontally using margin auto

I'm trying to display a block in the center of the window using margin auto.

My code is

<div class="centre-element"> This box is coming at the center of the window. </div>

CSS

.centre-element{
    width: 200px;
    height: 100px;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

This works in all the browsers I tested except in IE7. Is there any help for this?

Appreciate any help.

Upvotes: 1

Views: 2975

Answers (2)

Barnee
Barnee

Reputation: 3389

you can't center a div vertically using margin: auto, but you could try this:

.centre-element {
  top: 50%;
  margin-top: -50px; /* height/2 */
}

Edit:

Here is an example: http://jsfiddle.net/ZD432/

Upvotes: 2

aishazafar
aishazafar

Reputation: 1110

.centre-element{
   width: 200px;
   height: 100px;
   margin: auto;
   padding: auto;    
}

Upvotes: 0

Related Questions