How can i move the button to the center (html,jsp)? - html

Question

please tell me what to do to move my button to the center of the page. beacause right now it is in the right corner and i tried a lot of times to move it.
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 13px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
font-weight: bold;
}
.button1:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
</style>
<button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>

Answer 1

Horizontal aligment, you need to put css on the containing div, to control the child element...
.container {
display: block;
margin: 0 auto;
text-align: center;
}
<div class="container">
<button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>
If you are looking to vertically center the element, use...
button {
position: relative;
top: 50%;
transform: translateY(-50%);
}

Answer 2

Alternatively you can do it with flexbox, it's a powerful way to quickly center elements both horizontally and vertically.
You just have to put your button inside a container, apply flexbox to it, then margin: auto; will do the rest.
.container {
display: flex;
}
.button {
margin: auto;
}
<div class="container">
<button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>