CODEWITHSUNDEEP
htmlcsscss-positionmargin
Kristin
Kristin

Reputation: 441

resizeable centred div tag with fixed position

I'm trying to float a fixed position div tag in the centre of my browser and have it stay centred even when the browser is resized. I can get it centred but it moves to the left when the browser is resized because of the margins used to get it centred.

Is there a CSS trick I can use to make the margin-top & margin-left dynamic? I would also like to have the width of the container set to 90%.

#conntainer {
position:fixed;
width: 17028px; /* would like this to be width: 90%; */
height: 798px;
top: 50%;
left: 50%;
margin-top: -145px;
margin-left: -864px;
z-index: 100; 
}

Upvotes: 2

Views: 48

Answers (2)

j08691
j08691

Reputation: 207861

Use this instead:

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    z-index: 100; 
}

jsFiddle example

Upvotes: 1

Terry
Terry

Reputation: 66103

Use CSS transform instead.

#conntainer {
    position:fixed;
    width: 90%;
    height: 798px;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
}

See proof-of-concept fiddle here: http://jsfiddle.net/teddyrised/vbdCz/

The advantage of this method is that it also centers dynamic heights property... although it appears from your example that you'll be sticking to a fixed height anyway :) (in that case, using auto left/right margins without transform is sufficient).

p/s: You might want to add vendor prefixes (just -webkit-, actually) to the CSS transform property.

Upvotes: 0

Related Questions