在 div 中水平和垂直居中按钮答案

【问题标题】：Center a button horizontally and vertically in a div在 div 中水平和垂直居中按钮
【发布时间】：2017-06-12 13:59:25
【问题描述】：

我想为我的项目居中一个按钮水平和垂直在div的中间。

这里是html代码：

<div class="PageHeader_wrapper" id="header-buttons">
  <form id="CreateAccount" action="CreateAccount.php" method="post">
    <input type="submit" value="Create an account">
  </form>
</div>

这里的CSS：

#header-buttons {
  margin-right: 35px;
  float: right;
  height: 68px;
  width: auto;
  border: 1px solid red;
}

Js 在这里摆弄：https://jsfiddle.net/m635r2rf/10/

【问题讨论】：

jsfiddle.net/m635r2rf/11 你可以这样做，但你需要为父级设置宽度
CSS vertical align的可能重复
您需要在 SO 中搜索针对同一问题的已经太多解决方案。

标签： html css

【解决方案1】：

使用display: flex; align-items: center; justify-content: center; 的组合。另外，这是一个有用的参考https://www.w3.org/Style/Examples/007/center.en.html

#header-buttons {
  margin-right: 35px;
  float: right;
  height: 68px;
  width: auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="PageHeader_wrapper" id="header-buttons">
  <form id="CreateAccount" action="CreateAccount.php" method="post">
    <input type="submit" value="Create an account">
  </form>
</div>

【讨论】：

非常好！它完成了工作！感谢你及时的答复。 ^_^

【解决方案2】：

一个简单的解决方案是使用 flexbox：将这些设置添加到您的包装器中：

  display: flex;
  align-items: center;
  justify-content: center;

https://jsfiddle.net/3t7ynn6p/

【讨论】：

【解决方案3】：

您正在寻找的是在表单元素上设置line-height：

#CreateAccount {
  line-height: 60px;
}

在这种情况下这是 60 像素，因为您的父元素是 68 像素，默认字体大小是 16 像素。按钮字体大小的一半应等于与父级行高的差值。

基本上是这样的：

#CreateAccount {
  line-height: calc(100% - (1em /2)); /* calc([parent height] - ([font-size] / 2)); */
}

我创建了一个小提琴来展示这个here。

希望这会有所帮助！ :)

【讨论】：

谢谢！它帮助了我^_*

【解决方案4】：

您可以为此使用 table（可能是最简单且最向后兼容的方法）。

#header-buttons {
    margin-right: 35px;
    float: right;
    height: 68px;
    width: auto;
    border: 1px solid red;
    display: table;
}

#CreateAccount {
    display: table-cell;
    vertical-align: middle;
}

对于水平对齐，只需使用text-align 属性（因为按钮是inline-block），如下例所示： https://jsfiddle.net/m635r2rf/64/

【讨论】：

【解决方案5】：

HTML 代码更改：为按钮添加了一个 id 以供选择。

 <div class="PageHeader_wrapper" id="header-buttons">
              <form id="CreateAccount" action="CreateAccount.php" method="post">
                <input type="submit" id="createBtn" value="Create an account">
      </form>

CSS 代码更改： 从 div 中移除样式并添加到按钮中，如下所示 -

 #createBtn {
   position: fixed;
   left: 50%;
   top:50%;
 }

【讨论】：