Question

How do I center a <div> inside another <div>?

I have a page with a 100% <div> taking up the entire width of the page. Then another fixed width <div> which needs to be centered horizontally.

Here is the HTML:

<div style='100%'>
  <div style='width:200px;'>
  </div>
</div>

What is the CSS that will do this? Oh, and by the way, it should work responsively!

1 Answers

Centering is not very difficult. Simply use auto margins.

The CSS to apply to the inner <div> is like so:

.center-div {
    width:200px;
    margin: 0 auto;
    display: table;
}

This is the final HTML. It also works when resizing the browser:

<div style='100%'>
  <div class='center-div'>
  </div>
</div>

Looking for a job?
Startup (stealth)
London, UK

Microsoft
Seattle

Groundswell Cloud Solutions
Vancouver, Canada

Accenture
New York


Related
Horizontally centering a <div> inside another <div>
How to build Single Page Apps (SPAs) with multiple views with Angular
Difference between {{ expression }} and ng-bind