CODEWITHSUNDEEP
htmlcss
user2619395
user2619395

Reputation: 249

Center a Div element on the page?

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?

Upvotes: 0

Views: 145

Answers (3)

Milan and Friends
Milan and Friends

Reputation: 5610

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;   
}

Upvotes: 0

Love Trivedi
Love Trivedi

Reputation: 4046

Use this css this will work fine for you

DEMO HERE

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

}

Upvotes: 2

NullPoiиteя
NullPoiиteя

Reputation: 57322

Must set the width and remove position:fixed

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

}

Fiddle

Upvotes: 3

Related Questions