Button im div Element zentrieren

[Mephisto]

Danke fuer die schnelle Antwort, jedoch harpert es bei mir an der Umsetzung.

#button{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30em;
  height: 20em;
  margin-left: -15em;
  margin-top: -10em;
}

Das habe ich einfach mal aus dem Tutorial via Copy&Pasta eingefuegt, aber meine Buttons kleben imemr noch links oben in der Ecke.

 .button {
    background-color: /* Grey */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
    opacity:0.5;
    margin: 4px 2px;
    padding: 15px 32px;

Das ist mein Button

   <div id="nav2"><br>
  
  
    <div clas="button"><button class="button">Poems</button></div>
    <div clas="button"><button class="button">Books</button></div>
    </div>

Und hier versuche ich den vorher definierten Button und die vorher definierte Position zusammen zu packen, nur klappt es leider nicht.