[CSS]absoluteで上下左右中央

基本構成

HTML

<div class="parent">
 <div class="child">●</div>
</div>

CSS

.parent{
  position: relative;
  width: 100px;
  height: 100px;
}

横幅、縦幅のある、親要素に「position: relative;」を指定。

上下左右中央

CSS

.parent .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

「left: 50%;」だけでは、childの右端部分が中央に配置されるので、childを「translate」で自身の半分だけ、マイナス位置（右）へ移動することで左右中央に配置される。上下の概念も同じ。

上下中央

CSS

.parant .child {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

左右中央

.parent .child {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}