Centering <a> in <div> - html

Question

I am trying to get my <a> tags centered in div#teacherpageoptions. They are centered in Microsoft Expression Web, but not when I view the page in a browser. What am I doing wrong?
#blackbar {
background-color: chartreuse;
padding: 10px;
height: 57px;
}
html {
height: 100%;
}
body,
#teacherpage {
min-height: 100%;
background-color: #f4f4f4;
}
hr {
visibility: hidden;
}
.center {
padding-bottom: 50px;
padding-top: 50px;
}
.button {
display: block;
width: 115px;
height: 25px;
background: chartreuse;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.button1 {
display: block;
width: 115px;
height: 25px;
background: #008dde;
padding: 10px;
border-radius: 5px;
color: white;
font-weight: bold;
position: absolute;
}
p {
color: white;
font-weight: bold;
line-height: 40px;
}
.auto-style1 {
/* Make username hang a little to the left. */
margin-left: 53px;
}
#teacherpage {
height: 327px;
background-color: gray;
}
#teacherpageoptions {
margin-left: auto;
margin-right: auto;
height: auto;
}
.auto-style2 {
margin-right: 0px;
}
.wrapper {
text-align: center;
}
.auto-style3 {
margin-bottom: 0px;
}
a {
height: 100%;
opacity: 0.5;
width: 100%;
}
a:hover {
opacity: 1;
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
<div id="blackbar" class="auto-style3">
Logout
<p style=" float:right; height: 36px;" class="auto-style1">Username
<?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
</p>
</div>
<hr>
<div id="teacherpageoptions">
<div class="wrapper" style="height:100px "> Make Questions
<div class="center"></div>
Make Exam
</div>
</div>

Answer 1

Remove the position: absolute; from the .button1 and add margin: 0 auto; instead.
#blackbar {
background-color: chartreuse;
padding: 10px;
height: 57px;
}
html {
height: 100%;
}
body,
#teacherpage {
min-height: 100%;
background-color: #f4f4f4;
}
hr {
visibility: hidden;
}
.center {
padding-bottom: 50px;
padding-top: 50px;
}
.button {
display: block;
width: 115px;
height: 25px;
background: chartreuse;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
}
.button1 {
display: block;
width: 115px;
height: 25px;
background: #008dde;
padding: 10px;
border-radius: 5px;
color: white;
font-weight: bold;
/* position: absolute; */
margin: 0 auto;
}
p {
color: white;
font-weight: bold;
line-height: 40px;
}
.auto-style1 {
/* Make username hang a little to the left. */
margin-left: 53px;
}
#teacherpage {
height: 327px;
background-color: gray;
}
#teacherpageoptions {
margin-left: auto;
margin-right: auto;
height: auto;
}
.auto-style2 {
margin-right: 0px;
}
.wrapper {
text-align: center;
}
.auto-style3 {
margin-bottom: 0px;
}
a {
height: 100%;
opacity: 0.5;
width: 100%;
}
a:hover {
opacity: 1;
-webkit-transform: scale(3);
-ms-transform: scale(3);
transform: scale(3);
}
<div id="blackbar" class="auto-style3">
Logout
<p style=" float:right; height: 36px;" class="auto-style1">Username
<?php session_start(); echo $name=$ _SESSION[ 'name'] ?>
</p>
</div>
<hr>
<div id="teacherpageoptions">
<div class="wrapper" style="height:100px "> Make Questions
<div class="center"></div>
Make Exam
</div>
</div>

Answer 2

You can delete the "position:absolute" and put "margin:0 auto" instead.
Let me know how it worked.