Center Align Vertically and Horizontally

by ramsunvtech

HTML

<div id="page">
  <div class="center-div"></div>
</div>

CSS

body {
  margin: 20px 50px;
}

#page {
  width: 400px;
  height: 200px;
  border: 1px solid blue;
  position: relative;
}

.center-div {               
    position: absolute;
    height: 100px;
    width: 100px;
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}