/Html/Html - How to horizontally center an element

Html - How to horizontally center an element

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.

Source: thecodeteacher.com

Similar codes

0 vote241 views1 answer
Need help not working (https://unpkg.com/react@17/umd/react.development.js)
Html
0 vote246 views2 answers
Https://www.roblox.com/users/1528865483/profile
Html
11 votes223 views2 answers
Top middle bottom html
Html
0 vote248 views1 answer
Html minus sign
Html
0 vote239 views1 answer
How to remove the content of a html element
Html
0 vote233 views1 answer
Superscript the word using html
Html
5 votes236 views2 answers
Html bootstrap textarea
Html
27 votes222 views2 answers
Coding html ide online
Html
0 vote248 views1 answer
Chrome input autocomplete not working
Html
0 vote236 views1 answer
Display html table only on screen larger than md
Html