Centering divs with css
We have many different ways to center our content with css using an inner and an outer div. What we need to have in mind, is that inner div, should always be less width than the outer one.
Below, i will be attaching a couple of methods to centerize:
Our HTML:
|
1 2 3 |
<div id="outer"> <div id="inner">Foo foo</div> </div> |
Method 1:
|
1 2 3 4 5 6 7 8 |
#outer { width: 100%; text-align: center; } #inner { display: inline-block; } |
Method 2 – option 1:
|
1 2 3 4 5 6 7 8 |
#outer { width: 100%; } #inner { display: table; margin: 0 auto; } |
Method 2 – option 2:
|
1 2 3 4 5 6 7 8 9 |
#outer { width: 100%; } #inner { display: table; margin-left: auto; margin-right: auto; } |
Method 3:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#outer { position: relative; } #inner { margin: auto; position: absolute; left:0; right: 0; top: 0; bottom: 0; } |