css让盒子在底部居中，还要在最上层

可以使用CSS的flex布局来实现这个效果。具体步骤如下：

1. 在容器上设置display: flex; 和 align-items: center;，让盒子在垂直方向上居中对齐。

2. 在容器上设置justify-content: center;，让盒子在水平方向上居中对齐。

3. 在需要置于最上层的盒子上设置position: relative; 和 z-index: 1;，让它处于最上层。

下面是示例代码：

<div class="container">
  <div class="box"></div>
  <div class="top-box"></div>
</div>

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

.box {
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

.top-box {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  background-color: red;
}

其中，`.box` 为需要居中的盒子，`.top-box` 为需要置于最上层的盒子。注意，容器 `.container` 的高度必须是可确定的，否则无法垂直居中盒子。