button按钮左右居中，距离上面30px,距离下面10px

您可以尝试使用以下 CSS 样式来实现您的需求：

button {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  bottom: 10px;
}

这将使按钮水平居中并在顶部留出 30 像素的空间，在底部留出 10 像素的空间。用 `position: fixed` 属性将其固定在页面上，确保其在滚动时保持在同一位置。使用 `left: 50%` 将其水平居中，使用 `transform: translateX(-50%)` 修正其位置，使其在中心而不是左侧对齐。最后，使用 `top` 和 `bottom` 属性设置顶部和底部的间距。

相关问题

button按钮垂直居中

要将一个按钮垂直居中，可以使用 CSS 的 flexbox 布局。具体步骤如下：

1. 首先，将按钮所在的父元素设置为一个 flex 容器。可以通过设置父元素的 `display: flex` 实现。
2. 然后，使用 `align-items: center` 属性将按钮在垂直方向上居中对齐。

以下是一个示例代码：

<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center; /* 可选，水平居中 */
    height: 200px; /* 设置容器高度，以便垂直居中效果明显 */
  }
</style>

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

在上面的示例中，我们创建了一个名为 "container" 的容器，并将其设置为 flex 容器。然后，我们使用 `align-items: center` 属性将按钮在垂直方向上居中对齐。你可以根据需要调整容器的高度和其他样式属性来实现你想要的效果。

两个button按钮并排居中

要实现两个button按钮并排居中的效果，可以采用以下步骤：

1. 给两个button按钮添加一个共同的container容器元素，用于包裹这两个按钮。

2. 对这个container容器元素进行CSS样式设置，设置为display: flex; justify-content: center;。

3. 对每个button按钮进行CSS样式设置，设置为margin: 0 10px;。

4. 最后应用CSS样式，就可以实现两个button按钮并排居中的效果。

其中，第一步的目的是为了方便统一设置容器元素的样式，第二步设置容器元素的 display: flex 属性是为了将它内部的元素排列到同一行，justify-content 属性是为了让它们居中对齐。第三步设置按钮元素的 margin 属性是为了让它们之间有一定的距离，不会挨在一起看起来拥挤。

总之，以上步骤是实现两个button按钮并排居中的较为简单的方法，可以在很多实际开发中使用到。