Question

After I did some changes, my feedback div no longer centers on screen and I can’t figure out why.

To center a element one only have to set the width and then just do margin: 0 auto; That should normally be enough.

The goal is to have the div shown at the top of the screen, centered. You can see my fiddel here:

http://jsfiddle.net/3u3fd/

Code:

#feedback {
  position: fixed;
  top: 0px;
  min-height: 50px;
  width: 300px;    
  margin: 10px auto;
  z-index: 9000;
  font-weight: bold;
  line-height: 24px;
  border: solid 1px #d1d2d1;
  padding: 10px;
  background-color: #f7f2e7;
  display: none;
  border-radius: 5px;  
  -moz-border-radius: 5px; /* FF < 4.0 */
  -webkit-border-radius: 5px;     /* Rounded corners for Safari */ 
}

#feedback span { display: block; float: left;}
#feedback #feedback_icon { width: 24px; height: 24px; overflow: hidden; margin-right: 10px; }
#feedback #feedback_text { height: 24px; line-height: 24px; display: inline-block; }


​
<div class="clearfix" id="feedback" style="display: block;"><span class="dialogFail" id="feedback_icon"></span><div class="" id="feedback_text">Message here</div></div>

Any help appreciated!

Answer 1

auto margins do not work on elements with position: fixed.

Instead, you need to do this:

left: 50%;
margin-left: -Xpx;
width: Ypx;
box-sizing: border-box;

Where X = Y/2.

(The box-sizing: border-box ensures that even if you have padding or borders, it will still be centred. If that interferes with the desired width, then remove it and subtract the value of padding-left + border-left-width from the margin-left.)