The div and the button are not aligned in the center.
Both the content of the div and the button are centered within their respective elements.
The div takes up the full width of its container (can be seen by setting a background color), while the button adjusts to the minimum required width.
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.nav-col {
background-color: transparent;
margin: 10px;
padding: 10px;
font-size: 30px;
border: 1px solid grey;
height: 700px;
width: 150px;
}
.nav-col > div {
background: red;
}
<div class="nav-col">
<div style="text-align:center">contents</div>
<button style="text-align:center;">contents</button>
</div>
text-align only affects the position of inline content, not the element itself.
If you want the button to be centered, apply text-align to the button's parent container.
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.nav-col {
text-align: center;
background-color: transparent;
margin: 10px;
padding: 10px;
font-size: 30px;
border: 1px solid grey;
height: 700px;
width: 150px;
}
.nav-col > div {
background: red;
}
<div class="nav-col">
<div style="text-align:center">contents</div>
<button style="text-align:center;">contents</button>
</div>