Center ein button in einem DIV

Ich habe Probleme beim zentrieren einer Schaltfläche innerhalb eines DIV.

Den Ergebnissen, die ich bekomme derzeit ist:

Center ein button in einem DIV

HTML:

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

CSS besteht aus:

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

Glaube ich, dass diese route sollte der text aber scheint nicht zu funktionieren für die Schaltfläche. Ich habe versucht, indem die Klasse direkt auf den button mit keine Freude.

Dank

Schreibe einen Kommentar