html中垂直对齐方式代码

在HTML中，对于不同的元素，我们可以使用不同的方式来实现它们的垂直对齐。

align-content: center;
align-items: center;
justify-content: center;

以上三种方式都可以实现垂直居中，具体使用要根据不同的情况进行选择。其中，align-content和align-items主要是针对Flex布局中的子元素进行垂直对齐的，而justify-content主要是针对Flex布局中的容器进行对齐的。

如果是普通的块级元素，可以通过设置其内部元素的上、下外边距为0以及行高和容器高度相等来实现垂直居中。

.container {
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.container span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

以上代码实现了将容器高度设置为200px，并在其中嵌套了一个span元素进行垂直居中显示。将span的display属性设置为inline-block可以让它变成块级元素，并使用vertical-align属性来实现垂直对齐。

如果是行内元素，可以将它们的父元素的line-height值设置为与其高度相等，这样就可以实现垂直居中了。

.container {
  height: 50px;
  line-height: 50px;
}
.container span {
  display: inline-block;
  vertical-align: middle;
}

以上代码实现了将行内元素垂直居中显示的效果。父元素的高度设置为50px，然后设置其line-height与之相等，同时将子元素的display属性设置为inline-block以及vertical-align属性设置为middle即可。

总之，HTML中的垂直对齐方式有很多种，我们需要根据不同的情况进行选择，才能实现最佳的展示效果。