在 DIV 中居中按钮答案

【问题标题】：Center a button inside a DIV在 DIV 中居中按钮
【发布时间】：2016-03-10 01:45:26
【问题描述】：

我无法在 DIV 中将按钮居中。

我目前得到的结果是：

HTML 是：

<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>

CSS 包括：

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
}

.button {
     display:table-cell;
     align-content:center;
     vertical-align:middle; 
}

我相信这条路线应该适用于文本，但似乎不适用于按钮。我尝试将类直接添加到按钮中，但没有任何乐趣。

谢谢

【问题讨论】：

标签： html css position alignment center

【解决方案1】：

如果将 text-align center 添加到父容器，按钮将水平居中。然后你可以使用 top:50%; transform: translateY(-50%); 技巧垂直居中。

HTML

<div id="buttonDiv">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>

CSS

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
        text-align:center;
}

button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 1

在下面编辑

如果你需要保留'.button' div，你可以移动 top:50%; transform: translateY(-50%); 到那个类。

HTML

<div id="buttonDiv">
    <div class="button">
         <button type="submit" onClick="setSid()">Click here to Start Test</button>
    </div>
</div>

CSS

#buttonDiv {
   position: fixed;
   width:200px;
   height:200px;
   top: 50%;
   left: 50%;
   margin: -100px 0px 0px -100px;
   border: 1px solid #000;
   text-align:center;
}
.button {
   position:relative;
   top: 50%;
   transform: translateY(-50%);
}

jsfiddle option 2

【讨论】：

【解决方案2】：

怎么样：

CSS：

#buttonDiv {
        position: fixed;
        width:200px;
        padding: 78px 0;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 1px solid #000;
}

.button {
  width: 90%;
  margin: 0 auto;
}

【讨论】：

恐怕运气不好。 buttonDiv 使用宽度和高度参数将框完美地居中。现在我只需要该 DIV 中居中的按钮

【解决方案3】：

尝试将盒子的line-height设置为它的高度；然后将按钮显示为 inline 元素并添加 text-align:center

#buttonDiv {
        position: fixed;
        width:200px;
        height:200px;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border-bottom-width:1px;
        border-top-width:1px;
        border-right-width:1px;
        border-left-width:1px;
        border-style:solid;
        border-color:#000000;
  line-height:200px;
  text-align:center;
}

.button {
     display:inline;
}

<div id="buttonDiv">
<div class="button">
<button type="submit" onClick="setSid()">Click here to Start Test</button>
</div>
</div>

【讨论】：