centered via translate

by jshacker

HTML

<div id="outer">
  <div id="centered"></div>
</div>

CSS

#outer {
  background-color: red;
  height: 400px;
  width: 400px;
}
#centered {
  background-color: white;
  height: 100px;
  width: 100px;
}
#centered {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}