how to center a div inside of a div with entire page width

Question

I have a div that has a width the entire width of the page. Inside it is another div.

How can I center that child div inside it's parent div vertically so that when the page is re-sized and the parent div grows, the child div stays in the center?

Where is the code?!? A div in a div in a document... Please, make and effort an give us a JSFiddle link! — Nicolas Henrard, Jul 10 '14 at 20:19
possible duplicate of http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css — hp4k, Jul 10 '14 at 20:49

cheese12345 · Accepted Answer · 2014-07-10T20:45:12.823

Give the value in percent. Set the left and top to 50% this moves the top left corner of the div to the center of the parent. Then minus half the height and width in the margin which makes the center of the div in the center (eg. if the height and width were both 50px then minus 25px).For example

css:

#main{
    height: 100vh;
    width: 100%;
}

#secondary{
    width: 50px;
    height: 50px;
    top : 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -25px;
}

Check out my js fiddle

how to center a div inside of a div with entire page width

1 Answers1