1回答

• 

  秋之枫华

  2019-12-30 16:21:04

  假如父元素为div，子元素为ul，div高度之所以设置成auto，是因为一开始不知道里面有几个li，这样的话，div的高度可以由li来撑开。然后就分为两种情况了：

  第一种，你知道每个li的高度，且知道一共多少个li，假如每个li的高度为40px，一共3个li，那么div的高度就是120px。相应的，给div设置margin-top：-60px就可以达到垂直方向居中的效果。

  第二种，你无法确定li的高度和数量的时候，那么div的高度也就无从得知。这个时候可以这么给div设置：

  div{

      position:absolute;
  

      top:50%;
  

      transform:translateY(-50%);
  

  }

  再给div设置top：50%之后，加上transform:translateY(-50%)，这句代码的意思是div沿着垂直方向向下移动自身高度-50%的距离，实际效果也就是div会向上移动自身高度的50%，这样div在垂直方向上就居中了。

  其实比较建议这种设置方法，无论div的高度是否知道，这样都可以使div绝对垂直居中。

  0 0