CODEWITHSUNDEEP
csspositionz-indexcenter
dekkytsh
dekkytsh

Reputation: 37

Completely Center image and div

As you can see here http://dekkro.no-ip.org/

I have two divs, one on top of the other. I would like them to be 100% dead center. with the top div, staying in the center while the page is resized. They are centered to me, but for a lot of people they arent.

I have tried using margins and using percentages, but still isnt perfect. Is there a fix for this?

I am currently using

position:absolute; left:32%; top:24%;margin: auto;z-index:-1;

Thanks!

Upvotes: 0

Views: 2822

Answers (3)

Stobor
Stobor

Reputation: 45132

Just messing around quickly on Firebug:

<div class="my_img" 
     style="position: absolute; top:50%; width: 100%;">
    <img width="690" 
         height="425" 
         style=" margin: auto;z-index:-1; margin-top: -212px;"  
         src="http://dekkro.no-ip.org/images/testimage.png">
</div>
<div id="container" 
     style="position : absolute; 
                 top : 0; 
               width : 100%; 
         margin-left : auto; 
        margin-right : auto; 
              height : 600px; 
             z-index : 5;">

And if you need it to stay centred when scrolling, then make the first line:

<div class="my_img" 
     style="position: fixed; top:50%; width: 100%;">

Upvotes: 1

Sylvain Cleymans
Sylvain Cleymans

Reputation: 1917

If the width and height of your div is fixed you can center it using negative margins.

For example if you have a div of 300x200 you can center it this way :

div {
  position: absolute;
  width: 300px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -100px;
}

Upvotes: 2

CodeReaper
CodeReaper

Reputation: 6145

Back in the day I did it like describe here : http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Maybe there is a better more modern way now, otherwise you could use that...

Upvotes: 0

Related Questions