在 DIV 中居中一个按钮

Question

我无法将 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; 
}

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

谢谢

Answer 1

怎么样：

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

Answer 2

如果在父容器中添加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%); 到 class.

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

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

在 DIV 中居中一个按钮

Center a button inside a DIV

html

css

position

center

alignment