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

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

Answer 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