I am trying to center a div that wil constantly appear when scrolling. How shall I center it because I have tried all the methods I've seen and none appear to work. Here is the code:
#header { position:fixed; top:0%; left:0%; height:100px; width:100%; } <div id='header'> <button class='butt'>Home</button> <button class='butt'>Home</button> <img id='logo' src='Website/GUGM still logo.png' /> <!--Header That Moves--> <button class='butt'>Home</button> <button class='butt'>Home</button> </div> There are a few ways depending on the behavior of your header.
If your header has a fixed width, set the left and right properties to zero and set the left and right margin to auto: http://jsfiddle.net/YHrUm/
div { background:red; position:fixed; top:0; left:0; right:0; height:50%; width:200px; margin:0 auto; } If your header has a percentage width, you just need to set the left and right properties to the proper percentage. For example if your header will be 80% of the width you do this: http://jsfiddle.net/YHrUm/1/
div { background:red; position:fixed; top:0; left:10%; right:10%; height:50%; } But if your header has 100% width then you might want to center the content instead, which you do with text-align:center like everyone else said.
EDIT
A little extra: The trick with left and right and auto also works for top and bottom. You just need to apply the auto to the correct margin.
Normal methods to center:
text-align: center; And
margin: 0 auto; As you have width: 100%;, margin: 0 auto; will not work. This will center a div (or others) but as yours is 100% it cant center it as in a way it already is. So instead you can center the content.
add text-align:center to the header, and for all elements inside add display:inline-block
