[分享]css中字垂直体居中

CSS 是一种用来控制网页样式的语言，字垂直居中是在 CSS 中一个常见的问题。这是因为设置文字垂直居中需要同时掌握标题、文本、段落或其它元素的 padding、lineheight、margin 等...

CSS 是一种用来控制网页样式的语言，字垂直居中是在 CSS 中一个常见的问题。这是因为设置文字垂直居中需要同时掌握标题、文本、段落或其它元素的 padding、line-height、margin 等 CSS 属性的相互影响。

CSS 样式中，设置字垂直居中的方法不少，下面介绍几种比较实用的方法:

1. 使用 line-height，让行高等于盒子高度
p {
  height: 150px;
  line-height: 150px;
}
 
2. 绝对定位，top和margin
p {
  position: absolute;
  top: 50%;
  margin-top: -10px; /* 计算 margin 负值 */
}
 
3. 绝对定位 + transform
p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 
4. 使用 display:flex;
div {
  display: flex;
  align-items: center;
  justify-content: center;
} 

这些方法能便捷地设置字垂直居中，并且在实际开发中起到很好的应用。

CSS 对于网页开发来说，可以帮助我们将页面呈现得更加漂亮美观，同时使代码更加优雅和高效。