Question

I’m trying to fix a button to page. I’m not pro but here it is;

body {
    width:100%;
    height:100%;
    background:#181516;
    overflow:hidden;
    position:absolute;
}

.bg {    
    background:url(../images/entrance.jpg) no-repeat center center ; 
    height:100%;
    z-index:1;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

And the butttons;

.door {
    display:inline-block;
    width:170px;
    margin-top:22%;
}

But on the smaller or much bigger screens button goes wherever it wants 😀

It has to be fixed into a square. Back picture is a little door. And the button must be inside of that door… MArgin or padding px or % always the same. Can you help me?

Answer 1

If I understood it correctly i.e. that you want to have a div that always stays in the center of the screen.

Basically the way I do this is by positioning it absolute and 50% from the top side and the left side of the screen. Then the top-left point of the div is in the center, to fix that I use half of the div’s size as negative margin to position move it back up to the center.

So basically the following:

.door{
position: absolute;
top:50%;
left:50%;
width:170px;
height:200px;
margin-left:-85px;
margin-top:-100px;
background-color:#fff;
}