CSS3技巧36：让内容垂直居中的三种方式

在CSS中，有几种方法可以使内容垂直居中。以下是三种常见的方法：

使用Flexbox布局:




.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

使用Grid布局:




.container {
  display: grid;
  place-items: center; /* 水平和垂直居中 */
}

使用绝对定位和transform:




.container {
  position: relative;
}
 
.content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 如果需要水平居中，还需要设置左边距并加上transform: translate(-50%, -50%); */
}

这三种方法各有优缺点，Flexbox和Grid相对更简单易用，而绝对定位和transform则提供了更多的定制化选项。根据具体需求选择合适的方法。

CSS3技巧36：让内容垂直居中的三种方式

评论已关闭

推荐阅读