CSS - Horizontally centering a <div> inside another <div>

Was this helpful?

3 votes

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!

Apr 06, 2016.

share edit

Adrian Dixon
{ 65 - 1 - 0 }

add comment

1 Answers

Was this helpful?

0 votes

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>

Apr 06, 2016.

share edit

Albert Ivor
{ 50 - 1 - 0 }

add comment

Your Answer

We'll remember your Answer.

Looking for a job?

Microsoft

Seattle

Startup (stealth)

London, UK

Groundswell Cloud Solutions

Vancouver, Canada

JP/Morgan Chase

Dallas, Texas

•	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