html - How to horizontally center an element

ID : 65

viewed : 303

Tags : htmlcssalignmentcenteringhtml

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

vote vote


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>


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


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


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.


#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


#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


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

The code is basically this:

#outer {  position: relative; } 


#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