CSS 居中一个Twitter Bootstrap按钮

在本文中，我们将介绍如何使用CSS将一个Twitter Bootstrap按钮居中。

在网页开发中，常常需要将元素居中对齐，包括按钮。对于Twitter Bootstrap按钮，我们可以使用CSS中的一些技巧和属性来实现居中对齐的效果。

阅读更多：CSS 教程

居中对齐的方法

1. 使用text-align:center属性

我们可以使用text-align:center属性将按钮在其父容器中水平居中。首先，我们需要给按钮的父容器设置一个固定的宽度，然后将text-align:center属性应用于父容器。

.center-container {
  width: 200px; 
  text-align: center;
}

<div class="center-container">
  <button class="btn btn-primary">按钮</button>
</div>

这样就可以将按钮水平居中对齐。

2. 使用margin:auto属性

另一种居中对齐按钮的方法是使用margin:auto属性。我们首先需要给按钮设置一个固定的宽度，然后将margin-left和margin-right属性都设置为auto。

.auto-center {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

<div class="auto-center">
  <button class="btn btn-primary">按钮</button>
</div>

这样按钮就会在其父容器中水平居中。

3. 使用Flexbox布局

Flexbox是一种用于创建灵活的布局的CSS模块，在居中对齐方面非常强大。我们可以通过将父容器设置为display:flex，并使用justify-content和align-items属性来居中对齐按钮。

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

<div class="flex-center">
  <button class="btn btn-primary">按钮</button>
</div>

通过使用Flexbox布局，按钮将在其父容器中水平和垂直居中。

示例

下面是一个完整的示例，演示了如何使用CSS将一个Twitter Bootstrap按钮居中。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    .center-container {
      width: 200px;
      text-align: center;
    }

    .auto-center {
      width: 200px;
      margin-left: auto;
      margin-right: auto;
    }

    .flex-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h1>居中一个Twitter Bootstrap按钮</h1>

  <h2>使用text-align:center属性</h2>
  <div class="center-container">
    <button class="btn btn-primary">按钮</button>
  </div>

  <h2>使用margin:auto属性</h2>
  <div class="auto-center">
    <button class="btn btn-primary">按钮</button>
  </div>

  <h2>使用Flexbox布局</h2>
  <div class="flex-center">
    <button class="btn btn-primary">按钮</button>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>