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

Question

我要中心 按钮水平和 垂直 在 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/

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>