如何将页面中的按钮居中显示（HTML、JSP）

别着急，这问题太常见了，咱们一步步给你搞定！你的按钮现在是inline-block元素，默认会跟着父容器的文本流走，所以才会跑到右上角。下面给你几个简单有效的居中方案，选一个适合你的场景就行：

方案1：用Flex布局实现水平+垂直居中（最推荐，适配现代浏览器） #

这是目前最灵活的居中方式，不管按钮大小怎么变，都能稳稳居中。只需要给按钮的父元素（比如<body>或者专门的容器）添加Flex相关样式：

<style>
  /* 给父容器（这里用body举例）设置Flex布局 */
  body {
    display: flex;
    justify-content: center; /* 实现水平居中 */
    align-items: center;     /* 实现垂直居中（需要父容器有高度，这里用100vh占满整个视口） */
    min-height: 100vh;       /* 让body占满浏览器可视高度 */
    margin: 0;               /* 去掉body默认的margin，避免出现滚动条 */
  }

  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-weight: bold;
  }

  .button1:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
</style>

<button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>

方案2：父容器设置text-align: center实现水平居中 #

如果只需要水平居中，这个方法更简单——因为你的按钮是inline-block，父容器的text-align会直接影响它的位置：

<style>
  /* 给按钮套一个容器，设置text-align实现水平居中 */
  .button-wrapper {
    text-align: center;
    padding: 50px 0; /* 上下加padding让按钮垂直位置更美观，可选 */
  }

  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 17px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-weight: bold;
  }

  .button1:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
</style>

<div class="button-wrapper">
  <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>

方案3：按钮设为块级元素，用margin: 0 auto实现水平居中 #

把按钮改成block元素后，用自动外边距就能实现水平居中：

<style>
  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 13px 32px;
    text-align: center;
    text-decoration: none;
    display: block; /* 改成块级元素 */
    font-size: 17px;
    cursor: pointer;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    font-weight: bold;
    margin: 0 auto; /* 左右自动外边距实现水平居中 */
    /* 如果需要垂直居中，同样需要父容器有高度，配合margin-top或者Flex布局 */
  }

  .button1:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  }
</style>

<button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>

方案选择建议： #

• 需要水平+垂直双居中：优先选方案1，适配性最强；
• 只需要水平居中且想保留按钮inline-block特性（比如后续要在同一行加其他元素）：选方案2；
• 只需要水平居中且按钮单独占一行：选方案3。

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