div align center and middle

Example of div align at center and middle

by Mateus Correia

HTML

<div id="outer" style="width:300px;height:300px">  
  <div id="inner">Foo foo</div>
  <div id="inner">Foo foo</div>
</div>

CSS

#outer {
  border: 2px solid black;  
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#inner {
  border: 2px solid blue;  
  display: inline-block;
  width: 80px;
  margin: 0 auto; 
}