技术问询：如何将网页中的按钮设置为居中对齐？

嘿，这有几种简单靠谱的方法能让你的按钮在网页里居中，我给你逐个拆解：

方法1：Flex布局（现代前端首选） #

这是目前最灵活的居中方案，不管你要水平还是垂直居中都能轻松搞定。只需要给按钮的父容器（比如直接用<body>）加上flex相关样式就行：

<button id="user-button" class="Sign-in"> Sign in </button>
<style>
  /* 给父容器（body）设置flex布局 */
  body {
    display: flex;
    justify-content: center; /* 实现水平居中 */
    align-items: center; /* 实现垂直居中（可选） */
    min-height: 100vh; /* 让body占满整个视口高度，配合垂直居中使用 */
    margin: 0; /* 清除body默认的外边距 */
  }

  .Sign-in{
    background-color: springgreen;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Lobster, helvetica;
  }
</style>

这个方法的好处是，不管按钮尺寸怎么变，都能稳稳保持居中，还完美支持响应式布局。

方法2：父容器用text-align: center（简单快速） #

如果只需要水平居中，这个方法最省事。因为按钮默认是行内块元素，给它的父容器加上text-align: center就能让按钮水平居中：

<!-- 给按钮套一个父容器 -->
<div class="button-wrapper">
  <button id="user-button" class="Sign-in"> Sign in </button>
</div>
<style>
  .button-wrapper {
    text-align: center; /* 让内部行内/行内块元素水平居中 */
  }

  .Sign-in{
    background-color: springgreen;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Lobster, helvetica;
  }
</style>

要是你的按钮直接放在<body>里，也可以直接给<body>加text-align: center，效果是一样的。

方法3：按钮自身加margin: 0 auto（无需额外容器） #

把按钮转为块级元素，然后设置左右外边距为auto，就能实现水平居中：

<button id="user-button" class="Sign-in"> Sign in </button>
<style>
  .Sign-in{
    background-color: springgreen;
    border: none;
    color: white;
    padding: 15px 25px;
    text-align: center;
    font-size: 18px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Lobster, helvetica;
    display: block; /* 把按钮转为块级元素 */
    margin: 0 auto; /* 左右自动分配外边距，实现水平居中 */
  }
</style>

这个方法不需要额外的父容器，只修改按钮样式就行，但注意它只能实现水平居中哦。

内容的提问来源于stack exchange，提问作者Sobhan