按钮位于div正中间

要将按钮位于div正中间，可以使用CSS的flexbox布局。Flexbox是一种弹性盒子布局模型，可以轻松地实现元素的水平和垂直居中。

我们需要创建一个包含按钮的div，并给它一个唯一的id，以便在CSS中引用它。接下来，我们可以使用以下CSS代码将按钮位于div正中间：

<div id="container">
  <button>按钮</button>
</div>

#container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #f1f1f1;
}
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

在这个示例中，我们首先使用`display: flex`将父元素`#container`设置为flex容器。然后，我们使用`justify-content: center`将子元素水平居中，使用`align-items: center`将子元素垂直居中。

为了更好地展示效果，我们还给`#container`设置了一个高度和背景颜色。按钮的样式也被设置为绿色背景、白色文本和无边框。

这种方法不仅适用于按钮，还适用于任何其他元素。可以通过修改`#container`的样式来调整元素的大小和位置。

Flexbox布局是一种强大且灵活的布局模型，可以轻松地实现复杂的布局需求。它还提供了许多其他属性，如`flex-direction`、`flex-wrap`和`align-content`，可以进一步控制元素的布局。如果想要深入了解Flexbox的更多知识，可以查阅相关文档和教程。