在css中使用display: flex;时两头对齐，上下居中的方案

使用 display: flex; 布局时，可以通过设置 justify-content: space-between; 属性将子元素两端对齐，同时使用 align-items: center; 属性将子元素在垂直方向上居中对齐。
以下是示例代码：
HTML代码

<div class="container">
  <div>左侧内容</div>
  <div>右侧内容</div>
</div>

CSS代码

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

上述代码中，我们创建了一个包含两个子元素的容器，并使用 display: flex; 将其设置为 Flex 布局。接着，使用 justify-content: space-between; 属性将子元素两端对齐，并使用 align-items: center; 属性将子元素在垂直方向上居中对齐。
在实际应用中，你可以将 .container 替换为需要设置布局的父元素，并将其中的子元素替换为具体的内容和样式。如果需要更精细的布局效果，还可以根据具体需求设置其他 Flex 属性，如 flex-direction、flex-wrap、align-content 等等。
需要注意的是，在使用 Flex 布局时，可能会出现一些兼容性问题，尤其是在较老的浏览器中。建议在编写代码时仔细查看相关文档并进行充分测试，以确保布局效果的稳定和兼容。