css中方块垂直居中

CSS中的方块垂直居中对于页面布局和美化都十分重要，下面介绍几种实现方法：

1. line-height方法
使用该方法需要知道元素高度，首先将该元素的line-height设置成等于高度，然后将该元素的display设置成inline-block，即可实现垂直居中效果。 
code示例： 
.vertical-center {
  height: 100px;
  line-height: 100px;
  display: inline-block;
} 

2. margin方法
使用该方法需要知道元素高度和宽度，将该元素的上下外边距设置成自动，左右外边距设置为auto，即可实现垂直居中效果。
code示例：
.vertical-center{
  background-color: #f9f9f9;
  position: relative;
  top: 50%;
  margin-top: -25px; /*元素高度的一半*/
  width: 150px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
}

3. display:flex;方法
使用该方法需要将容器的display属性设置成flex，即可使用justify-content和align-items属性来实现居中效果。justify-content用于水平居中，align-items用于垂直居中。该方法的好处在于可以动态改变元素高度和宽度，仍能保持居中效果。
code示例：
.center{
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
  height: 100px;
}

以上是介绍css中方块垂直居中的几种方法，可以根据实际需求选择其中一种或者多种方法。