html - How to horizontally center an element

ID : 65

viewed : 329

Tags : htmlcssalignmentcenteringhtml

Top 5 Answer for html - How to horizontally center an element

vote vote

95

You can apply this CSS to the inner <div>:

#inner {   width: 50%;   margin: 0 auto; } 

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {   display: table;   margin: 0 auto; } 

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {   display: table;   margin: 0 auto;   border: 1px solid black; }  #outer {   border: 1px solid red;   width:100% }
<div id="outer">   <div id="inner">Foo foo</div> </div>


EDIT

With flexbox it is very easy to style the div horizontally and vertically centered.

#inner {     border: 1px solid black; }  #outer {   border: 1px solid red;   width:100%;   display: flex;   justify-content: center; }
<div id="outer">   <div id="inner">Foo foo</div> </div>

To align the div vertically centered, use the property align-items: center.

vote vote

83

If you don't want to set a fixed width on the inner div you could do something like this:

#outer {    width: 100%;    text-align: center;  }    #inner {    display: inline-block;  }
<div id="outer">        <div id="inner">Foo foo</div>  </div>

That makes the inner div into an inline element that can be centered with text-align.

vote vote

72

The best approaches are with CSS 3.

Box model:

#outer {    width: 100%;    /* Firefox */    display: -moz-box;    -moz-box-pack: center;    -moz-box-align: center;    /* Safari and Chrome */    display: -webkit-box;    -webkit-box-pack: center;    -webkit-box-align: center;    /* W3C */    display: box;    box-pack: center;    box-align: center;  }    #inner {    width: 50%;  }
<div id="outer">    <div id="inner">Foo foo</div>  </div>

According to your usability you may also use the box-orient, box-flex, box-direction properties.

Flex:

#outer {     display: flex;     flex-direction: row;     flex-wrap: wrap;     justify-content: center;     align-items: center; } 

Read more about centering the child elements

And this explains why the box model is the best approach:

vote vote

65

#centered {   position: absolute;   left: 50%;   margin-left: -100px; }
<div id="outer" style="width:200px">   <div id="centered">Foo foo</div> </div>

Make sure the parent element is positioned, i.e., relative, fixed, absolute, or sticky.

If you don't know the width of your div, you can use transform:translateX(-50%); instead of the negative margin.

With CSS calc(), the code can get even simpler:


.centered {   width: 200px;   position: absolute;   left: calc(50% - 100px); } 

The principle is still the same; put the item in the middle and compensate for the width.

vote vote

55

I've created this example to show how to vertically and horizontally align.

The code is basically this:

#outer {  position: relative; } 

and...

#inner {   margin: auto;   position: absolute;   left:0;   right: 0;   top: 0;   bottom: 0; } 

And it will stay in the center even when you resize your screen.

Top 3 video Explaining html - How to horizontally center an element

Related QUESTION?