Как я могу переместить кнопку в центр (HTML, JSP)?

Question

скажите, пожалуйста, что нужно сделать, чтобы переместить мою кнопку в центр страницы. потому что сейчас он находится в правом углу, и я много раз пытался его переместить.

        <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

Кроме того, вы можете сделать это с помощью flexbox, это мощный способ быстро центрировать элементы как по горизонтали, так и по вертикали.

Вам просто нужно поместить свою кнопку внутри контейнера, применить к нему flexbox, а затем margin: auto;сделает все остальное.

.container {
  display: flex;
}
 
.button {
  margin: auto;
}

<div class="container">
  <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>

Answer 2

Горизонтальная aligment, вам нужно поместить css в содержащий div, чтобы контролировать дочерний элемент ...

.container {
    display: block;
    margin: 0 auto;
    text-align: center;
}

<div class="container">
    <button class="button button1" type="button" onclick="history.back()" value="חזור וחשב מחדש">חשב מחדש</button>
</div>

Если вы хотите расположить элемент вертикально по центру, используйте ...

button {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}