css实现左右垂直居中显示

CSS实现左右垂直居中显示是Web前端开发中一项非常重要的技能。本文将为大家介绍实现左右垂直居中显示的几种方法。

方法1：
.container{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.item{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

方法2：
.container{
  position: relative;
}
.item{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

方法3：
.container{
  position: relative;
  text-align: center;
}
.item{
  display: inline-block;
  vertical-align: middle;
}
.inner{
  display: inline-block;
  vertical-align: middle;
}

方法4：
.container{
  display: table;
  width: 100%;
  height: 100%;
}
.item{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

这几种方法都能实现左右垂直居中显示，但是在实际应用中，需要根据不同的场景选择最合适的方法。