怎么用css把按钮居中

将按钮居中通常可以使用CSS的flexbox、grid布局或者是定位属性（如`position: absolute` 或 `position: relative`）。以下是几种常见的方法：

1. **Flexbox**:
如果容器是行内元素或设置了display:flex，你可以直接设置按钮元素的样式：

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

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

2. **Grid**:
对于更复杂的布局，可以使用CSS Grid:

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

   .container {
     display: grid;
     place-items: center; /* 同时水平和垂直居中 */
   }

3. **绝对定位** (相对于其最近的非静态定位祖先):

   <div class="parent">
     <button class="btn">按钮</button>
   </div>

   .parent {
     position: relative;
   }
   .btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%); /* 将自身移动到中心位置 */
   }

4. **内联块级元素**:
如果按钮是一个inline-block元素，可以设置text-align: center对齐其文本：

   button {
     display: inline-block;
     text-align: center;
   }

每种方法都有其适用场景，选择最合适的取决于实际布局的需求。