垂直居中

文字的垂直居中

p {
  display: table-cell;
  vertical-align: middle;
  height:100px;
  border: 1px dashed gray;
}

元素的垂直居中

.parent{
  position: relative;
  height:100px;
  width:100px;
  background:red;
}
.child{
  position: absolute;
  top: 50%;
  left: 50%;
  height:50px;
  width:50px;
  margin-top: -25px;
  margin-left: -25px;
  background:blue;
}