Question

我想在项目的div中间居中水平按钮和 verticaly 。

这是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/

Answer 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>

Answer 2

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

#CreateAccount {
  line-height: 60px;
}

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

基本上，它将是：

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

我创造了一个展示这个here的小提琴。

希望这有帮助！：）

Answer 3

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

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

https://jsfiddle.net/3t7ynn6p/

Answer 4

您可以使用表格（可能是最简单，最向后兼容的方法）。

#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/

Answer 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%;
 }

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

5 个答案: