[分享]css中常见的布局居中垂直

CSS中常见的布局方式是让元素居中，包括水平方向和垂直方向。下面我们将介绍一些实现布局居中垂直的方法。/ 方法一：使用display:flex / .container{ display: flex;...

CSS中常见的布局方式是让元素居中，包括水平方向和垂直方向。下面我们将介绍一些实现布局居中垂直的方法。

/* 方法一：使用display:flex */
.container{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center; /* 垂直方向居中 */
}

/* 方法二：使用绝对定位 */
.container{
  position: relative;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将元素向左上方移动自身宽度和高度的一半，实现居中效果 */ 
}

/* 方法三：使用table-cell */
.container{
  display: table-cell;
  vertical-align: middle; /* 垂直方向居中 */
  text-align: center; /* 水平方向居中 */
}

/* 方法四：使用flexbox方式 */
.container{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center; /* 垂直方向居中 */
  align-items: center;
  -webkit-justify-content: center; /* 水平方向居中 */
  justify-content: center;
}

/* 方法五：使用transform */
.container{
  position: relative;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%); /* 同时向上和向左移动自身高度和宽度的一半，实现居中效果 */
} 

以上是常见的布局居中垂直的方法，大家可以选择相应的方法进行实现。其中，flexbox方式运用最广泛，也是最新的布局方式之一，值得大家学习和掌握。