compose Box 居中

要使compose box居中，可以使用CSS的flexbox属性来实现。以下是一个示例代码：

HTML:

<div class="container">
  <div class="compose-box">Compose Box</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.compose-box {
  width: 300px;
  height: 150px;
  background-color: #ccc;
  text-align: center;
  line-height: 150px;
}

解释：

- `display: flex;` 将容器设置为flex容器。
- `justify-content: center;` 将flex子项水平居中对齐。
- `align-items: center;` 将flex子项垂直居中对齐。
- `height: 100vh;` 将容器高度设置为视口高度，以确保它在屏幕中央。

在这个示例中，我们使用了一个container容器来包含compose box。我们将container设置为flex容器，并使用justify-content和align-items属性来使compose box居中对齐。