垂直居中不同高度的内嵌块元素

可以使用CSS的flexbox布局来实现。Flexbox是一种用于构建灵活的、响应式的布局的CSS3模块。

在Flexbox布局中，可以使用align-items属性来实现垂直居中。align-items属性可以接受以下几个值：

flex-start：将元素顶部与容器的顶部对齐。
flex-end：将元素底部与容器的底部对齐。
center：将元素垂直居中。
baseline：将元素的基线与容器的基线对齐。
stretch（默认值）：拉伸元素以适应容器的高度。

以下是一个示例代码，展示如何使用flexbox布局实现垂直居中不同高度的内嵌块元素：

HTML代码：

<div class="container">
  <div class="box">块元素1</div>
  <div class="box">块元素2</div>
  <div class="box">块元素3</div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  height: 300px; /* 容器的高度 */
  border: 1px solid black; /* 仅用于示例，可根据需要设置样式 */
}

.box {
  width: 100px;
  background-color: lightblue; /* 仅用于示例，可根据需要设置样式 */
  margin: 10px; /* 仅用于示例，可根据需要设置样式 */
}

在上述示例中，通过将容器的display属性设置为flex，使其成为一个flex容器。然后使用align-items属性将内嵌的块元素垂直居中。

这是一个基本的示例，你可以根据实际需求来调整布局和样式。如果想要了解更多关于flexbox布局的信息，可以参考腾讯云的CSS3 flexbox布局文档：CSS3 flexbox布局。