div内的btn上下居中

要在HTML的`<div>`元素内让按钮(`<button>`)实现上下居中，可以采用CSS的方式，通常使用Flexbox布局或者Grid布局。以下是两种常见方法：

**1. 使用 Flexbox:**

<style>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: whatever-your-height-is; /* 需要设置一个固定的或者自适应的高度 */
}
.button-container {
  width: whatever-your-width-is;
}
</style>

<div class="container">
  <div class="button-container">
    <button>点击我</button>
  </div>
</div>

在这个例子中，`.container`设置了Flexbox布局，并将按钮容器 `.button-container`及其内部的按钮居中。

**2. 使用 Grid:**

<style>
.container {
  display: grid;
  place-items: center; /* 上下左右居中 */
  height: whatever-your-height-is;
}
.button-container {
  width: whatever-your-width-is;
}
</style>

<div class="container">
  <div class="button-container">
    <button>点击我</button>
  </div>
</div>

这里同样给`.container`设定了Grid布局，`place-items`属性用于一次性设置垂直和水平对齐。

**相关问题--:**
1. Flexbox和Grid布局有什么区别，分别适用于哪种场景？
2. 如果不想依赖外部样式表，如何直接在按钮上应用居中样式？
3. 如果按钮内容动态变化，上述方法是否还有效？