CSSで上下左右ド真ん中に配置

/* 親要素（この要素のド真ん中に配置） */
.parent { 
  height: 500px; /* 高さは必須 */
  position: relative; 
}

/* 中央に配置したい子要素 */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* 親要素（この要素のド真ん中に配置） */
.parent { position: relative; }

/* 中央に配置したい子要素 */
.child {
  width: 80%; /* 左右に10％づつ余白 */
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

/* 親要素に指定するだけ */
.parent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}