div won't center with normalize.css

Question

For some reason when I add normalize.css to my code my div won't center within it's container.

<div id="wrap">
    <div id="myDiv">
    </div>
</div>

and

#wrap {
height:100%;
width:100%;
text-align:center;
}

#myDiv {
height:30%;
width:60%;
background:#999999;
}

jsfiddle: http://jsfiddle.net/msteeledunn/3xw1t6yo/

Answer 1

Add margin: 0 auto; to myDiv CSS

Answer 2

To center horizontally you just need to add an automatic left and right margin to the div you want to position in the center. (This works for all elements with display:block, which is the default display attribute for div elements)

#myDiv {
  height:30%;
  width:60%;
  background:#999999;
  margin: 0 auto; /*Center horizontally*/
}

Keep in mind that you need to set a width for this to work. either in percentages or pixels.

http://jsfiddle.net/3xw1t6yo/2/

Answer 3

Yourtext-align: center is just going to center the text inside the div. You need to center the div with the following

#myDiv {
   height:30%;
   width:60%;
   background:#999999;
   margin: 0 auto;
}