Center align div inside div?

Question

How do I center align 3 floating divs inside each other centered on page ?

<div style="width:100%">
     <div style="width:90%">
           <div style="width:80%">
                //Content
           </div>
     </div>
</div>

possible duplicate of [How to center DIV in DIV?](http://stackoverflow.com/questions/114543/how-to-center-div-in-div) — ChrisR, Dec 21 '11 at 09:57
Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:23
Possible duplicate of [How to horizontally center a
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div) — lesyk, Jul 30 '19 at 08:46

score 15 · Accepted Answer · answered Dec 21 '11 at 09:59

15

Use margin: auto in CSS.

<div style="background-color: red; height: 100px; width: 500px; margin: auto;">
     <div style="background-color: green; height: 100px; width: 300px; margin: auto;">
           <div style="background-color: blue; height: 100px; width: 100px; margin: auto;">
                //Content
           </div>
     </div>
</div>

answered Dec 21 '11 at 09:59

socha23

10,171
2
28
25

Thanks but my divs have width in percentages like 100%,80%, 50 % . – Zo Has Dec 21 '11 at 10:06
1

just change pixel widths to percents, it will still work. The important thing in my code is `margin: auto`. – socha23 Dec 21 '11 at 10:10
What is the 0 in margin for ? – Zo Has Dec 21 '11 at 10:13
2

margin has a shorthand: `margin: [top] [right] [bottom] [left]`. `margin: 0 auto` is a shortened version which means `margin: 0 auto 0 auto`, so left and right margin is auto, while top and bottom margin is 0. – Joakim Johansson Dec 21 '11 at 10:17
Works out great. Thank you. Wayne – Wayne Barron Jun 06 '17 at 10:19

score 3 · Answer 2 · answered Dec 21 '11 at 09:58

3

If the element you're centering has a specified width, you can center it with margin: 0 auto

answered Dec 21 '11 at 09:58

Joakim Johansson

3,196
1
27
43

Center align div inside div?

2 Answers2