按钮在div里垂直居中显示

要实现按钮在div里垂直居中显示，可以使用CSS的flexbox布局。Flexbox是一种弹性布局模型，它可以轻松地实现元素的对齐和布局。

我们需要将div设置为flex容器，这样它的子元素就可以使用flexbox布局了。可以通过设置div的display属性为flex来实现：

<div style="display: flex;"></div>

接下来，我们需要将按钮元素放置在div中。为了实现垂直居中，我们可以使用flexbox布局的align-items属性。将align-items属性设置为center可以使子元素在容器中垂直居中显示：

<div style="display: flex; align-items: center;">
  <button>按钮</button>
</div>

这样，按钮元素就会在div中垂直居中显示了。

除了使用flexbox布局，还可以使用传统的CSS方法实现垂直居中。一种常用的方法是使用绝对定位和transform属性。将div设置为相对定位，然后将按钮元素设置为绝对定位，并使用transform属性将其向上移动50%的高度。使用负的margin-top值将按钮元素向上移动自身高度的一半：

<div style="position: relative;">
  <button style="position: absolute; top: 50%; transform: translateY(-50%); margin-top: -25px;">按钮</button>
</div>

这样，按钮元素也会在div中垂直居中显示。

总结一下，要实现按钮在div里垂直居中显示，可以使用CSS的flexbox布局或传统的绝对定位和transform属性。flexbox布局可以轻松实现元素的对齐和布局，而传统的方法则需要使用绝对定位和transform属性来实现。根据具体的需求和兼容性要求，选择合适的方法来实现垂直居中显示。