Menu
Question
[Question]

Horizontally centering a <div> inside another <div>  

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>

asked Apr 02, 2016
viewed 648 times
active Apr 06, 2016
Looking for a job?
Microsoft
Seattle

Groundswell Cloud Solutions
Vancouver, Canada

JP/Morgan Chase
Dallas, Texas

Startup (stealth)
London, UK


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