CSS 中掌控垂直居中的七种利器

transform 居中

transform 属性可以用来对元素进行平移、旋转、缩放等操作，也可以用于实现垂直居中。具体做法是将元素的 position 属性设置为 absolute 或 fixed，然后使用 translate 属性将其垂直居中。

.element {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

absolute + margin auto

absolute + margin auto 是一种非常简单实用的垂直居中方法。具体做法是将元素的 position 属性设置为 absolute，然后使用 margin: 0 auto; 将其垂直居中。

.element {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

absolute + calc

absolute + calc 是一种更加灵活的垂直居中方法。具体做法是将元素的 position 属性设置为 absolute，然后使用 calc() 函数计算元素的垂直居中位置。

.element {
  position: absolute;
  top: calc(50% - 50px);
  left: 50%;
  transform: translate(-50%, -50%);
}

absolte + 负margin

absolte + 负margin 是一种简单粗暴的垂直居中方法。具体做法是将元素的 position 属性设置为 absolute，然后使用负 margin 将其垂直居中。

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

lineheigth

lineheigth 是一种古老的垂直居中方法。具体做法是将元素的 line-height 属性设置为与元素的高度相同。

.element {
  line-height: 50px;
}

flex

flex 是 CSS3 中引入的一种新的布局方式，它可以非常方便地实现垂直居中。具体做法是将元素的 display 属性设置为 flex，然后使用 align-items 属性将其垂直居中。

.element {
  display: flex;
  align-items: center;
}

grid

grid 是 CSS3 中引入的另一种新的布局方式，它也可以非常方便地实现垂直居中。具体做法是将元素的 display 属性设置为 grid，然后使用 justify-content 和 align-items 属性将其垂直居中。

.element {
  display: grid;
  justify-content: center;
  align-items: center;
}

总结

以上七种方法都是实现 CSS 垂直居中的有效方法，各有其优缺点。在实际项目中，我们可以根据具体情况选择合适的方法。

如果元素的内容较少，可以使用 transform、absolute + margin auto、absolute + calc 或 absolte + 负margin 等方法。

如果元素的内容较多，可以使用 lineheigth、flex 或 grid 等方法。

如果元素需要在不同浏览器中保持一致的垂直居中效果，可以使用 transform 或 grid 方法。