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

Question

我想在的中間水平和verticaly 居中 按鈕 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; 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)); */
}

我在這里創造了一個小提琴。

希望這可以幫助！ :)

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