CSS如何让一个按钮居中应该怎么做

在 CSS 中，让一个按钮居中有多种方法，下面是两种常用的方法：

方法一：使用 text-align 属性

可以使用 text-align 属性来让一个按钮在其父元素中水平居中。具体方法是将父元素的 text-align 属性设置为 center，然后将按钮的 display 属性设置为 inline-block。

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

.container {
  text-align: center;
}

button {
  display: inline-block;
}

上述代码中，将父元素的 text-align 属性设置为 center，然后将按钮的 display 属性设置为 inline-block，即可让按钮在其父元素中水平居中。

方法二：使用 flexbox 布局

可以使用 flexbox 布局来让一个按钮在其父元素中水平和垂直居中。具体方法是将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性来分别设置水平和垂直居中。

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

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

上述代码中，将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性来分别设置水平和垂直居中，即可让按钮在其父元素中水平和垂直居中。

示例说明

下面是两个示例，演示如何使用上述方法来让一个按钮居中。

示例一：使用 text-align 属性让按钮水平居中

<!DOCTYPE html>
<html>
<head>
  <title>居中按钮</title>
  <style>
    .container {
      text-align: center;
    }

    button {
      display: inline-block;
    }
  </style>
</head>
<body>
  <div class="container">
    <button>居中按钮</button>
  </div>
</body>
</html>

上述代码中，将父元素的 text-align 属性设置为 center，然后将按钮的 display 属性设置为 inline-block，即可让按钮在其父元素中水平居中。

示例二：使用 flexbox 布局让按钮水平和垂直居中

<!DOCTYPE html>
<html>
<head>
  <title>居中按钮</title>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <button>居中按钮</button>
  </div>
</body>
</html>

上述代码中，将父元素的 display 属性设置为 flex，然后使用 justify-content 和 align-items 属性来分别设置水平和垂直居中，即可让按钮在其父元素中水平和垂直居中。同时，为了让父元素占据整个视口，还设置了 height: 100vh。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS如何让一个按钮居中应该怎么做 - Python技术站