简易九宫格抽奖实现奖项布局和抽奖按钮居中

可以使用CSS的flexbox布局来实现简易九宫格抽奖的奖项布局和抽奖按钮居中。

首先，需要将九宫格的奖项和抽奖按钮都放在一个父容器内，可以使用div元素来作为父容器。

然后，在父容器的CSS样式中，使用display: flex和justify-content: center属性来让子元素水平居中对齐，使用align-items: center属性让子元素垂直居中对齐。

示例代码如下：

HTML:

<div class="lottery-container">
  <div class="lottery-item">奖项1</div>
  <<div class="lottery-item">奖项2</div>
  <div class="lottery-item">奖项3</div>
  <div class="lottery-item">奖项4</div>
  <div class="lottery-item">奖项5</div>
  <div class="lottery-item">奖项6</div>
  <div class="lottery-item">奖项7</div>
  <<div class="lottery-item">奖项8</div>
  <div class="lottery-item">奖项9</div>
  <button class="lottery-btn">抽奖</button>
</div>

CSS:

.lottery-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.lottery-item {
  width: 100px;
  height: 100px;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 100px;
}

.lottery-btn {
  width: 100px;
  height: 50px;
  margin-top: 20px;
  background-color: #f00;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
}

在上述代码中，lottery-container是父容器，lottery-item是九宫格的奖项，lottery-btn是抽奖按钮。

通过设置flex-wrap: wrap属性，当九宫格的奖项数量超过一行时，会自动换行排列。

设置lottery-item的宽度和高度，以及text-align和line-height属性来使奖项居中显示。

设置lottery-btn的宽度、高度、边距、背景色、字体颜色、边框样式、圆角和字体大小，使抽奖按钮居中显示。

最后，可以根据需要自行添加动画效果或其他样式。