div文字垂直居中

在CSS中，有多种方法可以实现div内文字的垂直居中。以下是几种常见的方法：

  1. 行高(line-height)法 ：

适用于单行文本，只需确保div的高度与文本行高相同1。

#div-a {
  height: 60px；
  line-height: 60px；
}
  1. 内边距(padding)法 ：

类似于行高法，通过设置padding来垂直居中内容1。

#div-b {
  padding: 30px；
}
  1. 模拟表格法 ：

使用display: table和vertical-align: middle来模拟表格布局，实现垂直居中1。

#wrap {
  height: 400px；
  display: table；
}
#content {
  display: table-cell；
  vertical-align: middle；
}
  1. Flexbox布局 ：

使用Flexbox的align-items: center属性，可以轻松实现垂直居中1。

.container {
  display: flex；
  align-items: center；
}
  1. CSS Grid布局 ：

使用CSS Grid的align-content: center属性，也可以实现垂直居中1。

.container {
  display: grid；
  align-content: center；
}
  1. CSS属性 align-content: center (适用于2024年及以后版本Chrome)：

这是一个CSS原生属性，可以直接应用于普通块级元素实现垂直居中1。

.container {
  align-content: center；
  height: 200px；
}

选择哪种方法取决于你的具体需求和布局情况。

Top
×
×