html - Comment centrer horizontalement un élément

99

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

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

#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>

#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>

80

#outer {    width: 100%;    text-align: center;  }    #inner {    display: inline-block;  }

<div id="outer">        <div id="inner">Foo foo</div>  </div>

78

#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>

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

68

#centered {   position: absolute;   left: 50%;   margin-left: -100px; }

<div id="outer" style="width:200px">   <div id="centered">Foo foo</div> </div>

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

58

#outer {  position: relative; } 

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