Div Centered

Horizontally and Vertically

by Mostafa Zeinivand

HTML

<div id="parent">
  <div id="child">
    <div id="content"></div>
  </div>
</div>

CSS

*{
  margin:0;
  padding:0;
}

html,body{
  width:100%;
  height:100%;
}

#parent{
  position:relative;
  display: table;
  width:100%;
  height:100%;
  background:grey;
}

#child{
  display:table-cell;
  vertical-align: middle;
}

#content{
  width:150px;
  height:150px;
  margin: 0 auto;
  background: black;
  color:white;
}