在页面上将Div元素居中？

Question

I was looking everywhere over the internet for the past 40 mins of trying to figure out how to properly center a div element.

Here is a snippet of my code of what I want centered:

<div id="boxcenter">
            <div id="boxoutline">
                <div id="boxmodel">
                    <p>Cupcake ipsum dolor. Sit amet sweet tiramisu sweet muffin caramels. I love lollipop sweet sweet roll fruitcake dragée.
                    Halvah tootsie roll cookie chocolate cake fruitcake sesame snaps I love I love. Chupa chups gummies I love marshmallow jelly donut powder 
                    dragée danish. Gummies I love fruitcake sweet croissant unerdwear.com dessert chocolate cake pastry.
                    Gummi bears marshmallow I love bonbon. Soufflé liquorice chocolate bar applicake marzipan sweet cake I love pie. Fruitcake 
                    wafer brownie halvah muffin muffin. Gingerbread gingerbread macaroon jelly beans icing soufflé donut marzipan candy canes.
                    </p>
                </div>
            </div>
        </div>

Here is the css I am using to create the box model and to center it. To center the box model I created I am using the div id of "boxcenter". The goal is to center this bad boy on the top of the page.

/*BOX MODEL STYLE*/
#boxmodel p{
    border: 2px dashed; 
}

#boxmodel{
    padding: 10px 20px;
    border: 15px solid green;
    margin: 20px;   
    height: 150px;
    width: 700px;   
}

#boxoutline{
    border: 2px dashed;
    width: 810px;
}

#boxcenter{
    position: fixed;
    top: 0px;
    margin: 0 auto;

}

Unfortunately all it is doing is displaying the box model on the top right of the page, not entirely too sure of how to correct this of how to center it on the page itself...Any ideas?

Answer 1

Must set the width and remove position:fixed

#boxcenter{
  width: 810px;
  margin: 0 auto;

}

Fiddle

Answer 2

Use this css this will work fine for you

DEMO HERE

#boxcenter{
  width: 816px;
  margin: 0 auto;

}

Answer 3

Must set the width

#boxcenter {
  position: relative;
  width: 960px;
  margin: 0 auto;
}

but if you want position fixed then

#boxcenter {
  position: fixed;
  width: 960px;
  top: 0;
  left: 50%;
  margin-left: -480px;   
}