display 上下排列居中

在网页设计或者CSS布局中，如果你想让两个或更多的元素水平排列并居中显示，可以使用Flexbox或者Grid布局来实现。以下是基本步骤：

**1. 使用Flexbox:**

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center; /* 居中水平方向 */
  align-items: center;   /* 居中垂直方向 */
  height: 100%; /* 或者设置一个固定高度，保证flex容器的高度 */
}
.item {
  width: 50%;
  padding: 10px; /* 样式自定 */
}
</style>

**2. 使用Grid布局:**

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
</div>

<style>
.container {
  display: grid;
  place-items: center; /* 同时居中水平和垂直方向 */
  height: 100vh; /* 或者设置一个固定高度 */
}
.item {
  width: fit-content; /* 自动调整宽度以便填充行 */
  padding: 10px;
}
</style>