[分享]css内容型高法垂直居中

CSS是Cascading Style Sheets（层叠样式表）的缩写，是一种用来描述文档显示样式的语言。其中，垂直居中一直是前端开发常见的难点，接下来就让我们来探讨CSS中垂直居中的几种实现方式。...

CSS是Cascading Style Sheets（层叠样式表）的缩写，是一种用来描述文档显示样式的语言。其中，垂直居中一直是前端开发常见的难点，接下来就让我们来探讨CSS中垂直居中的几种实现方式。

1.使用line-height属性

.parent {
  height: 300px;
  line-height: 300px;
}

.child {
  display: inline-block;
  vertical-align: middle;
} 

在上述代码中，我们设置了父元素的高度和行高相等，之后再将子元素采用inline-block的方式，并设置vertical-align属性为middle，即可实现文字、图片等元素的垂直居中。

2.使用flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /*无需设置垂直居中*/
} 

在上述代码中，我们使用了flex布局，将父元素的主轴和交叉轴都设置为居中，子元素无需再设置垂直居中即可实现。

3.使用绝对定位

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

在上述代码中，我们将父元素设置为相对定位，之后将子元素设置为绝对定位，并将其从中央向下平移50%，即可实现垂直居中。

综上所述，CSS实现垂直居中还有其他方法，如使用table布局、calc计算等，但以上这些是其中最为常用的方法，想要在前端开发中顺手掌握这些方法，就一定要好好学习啊！