Align a fixed item in css - html

Question

I would like to align a image in the middle. Very easy by giving the div a width and a margin: auto;. But the div should also carry the position: fixed; property, which doesn't go together as it turns out.
Here is my HTML:
<div class="header_container">
<div class="header">
<div class="header_links_icon">
<a href="https://www.facebook.com target="_blank" class="header_facebook">
<div class="header_facebook_icon"> </div>
</a>
<a href="https://twitter.com/" target="_blank" class="header_facebook">
<div class="header_twitter_icon"> </div>
</a>
</div>
</div>
</div>
And here is the CSS I'm using:
.header_container {
background-color: black;
padding-top: 35px;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
margin: auto;
width: 1440px;
position: fixed
}
And it's the header.png image that should be aligned in the middle of the screen AND being positioned fixed... How can I manage to do this?

Answer 1

You could make your header container fixed, then your .header would work:
.header_container {
background-color: black;
padding-top: 35px;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
margin: auto;
}
The other way would be with negative margins:
.header {
background-image: url('../images/css/header.png');
background-repeat: no-repeat;
height: 605px;
width: 1440px;
position: fixed;
left: 50%;
margin-left: -720px;
}

Answer 2

You have to set the left position to fifty percent and the margin-left to one half the element's width. This only works for items that have a set width.
http://jsfiddle.net/W9ZcY/
.header_container {
background-color: black;
padding-top: 35px;
border: 1px solid red;
}
.header {
border: 1px solid blue;
background: gray;
height: 105px;
left: 50%;
margin-left: -70px;
width: 140px;
position: fixed
}​

Answer 3

The issue is that you can either position a fixed element with percentages or pixels. Neither of them will do the proper offset calculation to make it truly centered. So you must sortof hack the placement to make it behave properly.
Positioning by percentage and offsetting with negative margins:
//assuming the block is 200px wide and 100px tall
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Alternatively, you can center it by fixing placement of a container then center your object within that container (as mentioned by #rgthree), this also works.

Answer 4

This will probably work:
.center {width:1440px;margin:0 auto;}
.header {width:1440px;position:fixed;etc...} // don't use margin:auto here
where
<div class='header_container>
<div class='center'>
<div class='header'>
<!-- contents -->
</div>
</div>
<div>

Answer 5

Hi you can give the fixed position to the main header_container class so that will work.
.header_container {
background-color: black;
position: fixed;
top:0;
left:0;
right:0;
}
.header {
background:green;
height: 100px;
width: 500px;
margin: auto;
}
please see the demo:- http://jsfiddle.net/rohitazad/W9ZcY/17/

Answer 6

Give position fixed in your parent header class rather than using fixed position in header child class...
.header_container {
position: fixed;
top:0;
left:0;
right:0;
}