Centrer un bouton dans un DIV

Si vous ajoutez le centre d'alignement du texte au conteneur parent, le bouton sera centré horizontalement. Ensuite, vous pouvez utiliser le haut: 50%; transformer: translateY (-50%); astuce pour centrer verticalement.

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

MODIFIER CI-DESSOUS

Si vous devez conserver le div '.button', vous pouvez simplement déplacer le haut: 50%; transformer: translateY (-50%); à cette classe.

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