CSSで上下中央揃えにする4つの方法

<div class="parent1">
<div>
<div class="child1">子</div>
</p></div>
</div>

.parent1{
  display:table;
}
.parent1 > div{
  width:100px;
  height:100px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  background:#F7BABB;
}
.child1{
  background:#87ABF4;
}

<div class="parent2">
<div class="child2">子</div>
</div>

.parent2{
  height:100px;
  width:100px;
  position:relative;
  background:#F7BABB;
}
.child2{
  height:50px;
  position:absolute;
  top:50%;
  margin-top:-25px;
  background:#87ABF4;
}

<div class="parent3">
<div class="child3">子</div>
</div>

.parent3{
  height:100px;
  width:100px;
  position:relative;
  background:#F7BABB;
}
.child3{
  height:50px;
  position:absolute;
  top:0;
  bottom:0;
  margin-top:auto;
  margin-bottom:auto;
  background:#87ABF4;
}

<div class="parent4">
<div class="child4">子</div>
</div>

.parent4{
  width:100px;
  padding-top:50px;
  padding-bottom:50px;
  background:#F7BABB;
}
.child4{
  background:#87ABF4;
}