css一行多行垂直居中显示

CSS中垂直居中是常见需求，但却较为困难。这里我们先来看看如何将一个元素在一行内垂直居中。

.parent {
  display: flex;
  align-items: center;
}
.child {
  margin: auto;
} 

父元素设置了flex布局，并且使用了align-items: center来使其子元素垂直居中，同时子元素的margin设置了auto来水平居中。

如果元素需要在多行内垂直居中，也有多种方法。我们先来看看最简单的方式：

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
.child {
  margin: auto;
} 

这里父元素使用了flex布局，将flex-direction设置为column来使子元素在垂直方向排列，然后使用了justify-content: center来使子元素在垂直方向居中。需要注意的是，父元素的高度必须是确定的。

如果需要支持IE9以下的浏览器，可以使用CSS3新增的transform属性来实现多行内垂直居中：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

这里子元素使用了绝对定位，并且将top属性设置为50%来将其移动到父元素的中心，然后使用transform属性来将子元素往上移动50%的高度，使其垂直居中。

总结：实现元素的一行或多行垂直居中，可以使用flex布局的align-items和justify-content属性，或使用CSS3的transform属性。