[分享]css中div中文字垂直居中

CSS是一种用来描述网页样式的语言，它可以控制网页中每个元素的样式，其中div是其中一个重要的元素。在CSS中，我们经常会遇到需要将div中的文字垂直居中的情况。下面，我们来探索几种实现div中文字垂...

CSS是一种用来描述网页样式的语言，它可以控制网页中每个元素的样式，其中div是其中一个重要的元素。在CSS中，我们经常会遇到需要将div中的文字垂直居中的情况。下面，我们来探索几种实现div中文字垂直居中的方法。

1. 使用line-height属性

div {
  line-height: 100px;
} 

使用line-height属性，可以将div中的文字垂直居中。需要注意的是，所设置的line-height值必须等于div的高度。

2. 使用flex布局

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

在div中使用flex布局，设置align-items和justify-content属性为center可以将文字垂直居中。这种方法不需要知道div的高度，适用于各种大小的div。

3. 使用position属性和translate属性

div {
  position: relative;
}

div p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

将div设置为相对定位，再将p元素设置为绝对定位，top属性设置为50%，然后使用translateY(-50%)将p元素上移50%的高度，就可以实现文字垂直居中。需要注意的是，这种方法只适用于单行文字。

4. 使用table布局

div {
  display: table;
  height: 100px;
}

div p {
  display: table-cell;
  vertical-align: middle;
} 

使用table布局，将div设置为table布局，然后将p元素设置为table-cell布局，设置vertical-align为middle，就可以实现文字垂直居中。这种方法适用于各种大小的div和多行文字。

以上就是几种实现div中文字垂直居中的方法，根据不同的需求可以选择不同的方法。希望对大家有所帮助。