阅读数:66 评论数:0

1、如果是单行文本

行高(line-height)=父级的height

2、对于已知高度的块级元素，可以采用绝对定位

.parent-div {
  position: relative;
}
.child-div {
  position: absolute;
  top: 50%;
  height: 300px;
  margin-top=-150px; // 往上提本身高度的一半
}

另一种方式

.parent-div {
  position: relative;
}
.child-div {
  position: absolute;
  inset:0; // 等价于top:0;bottom:0;left:0;right:0;
  margin: auto;
}

3、对于已知子级元素的高度，而且不能用绝对定位的情况

.parent-div {

}
.child-up-div {
  height: 50%;
}
.child-div {
  height: 300px;
  margin-top=-150px; // 往上提本身高度的一半
}