<div class="btn">Кнопка</div>
.btn {
display: flex;
height: 50px;
width: 300px;
background-color: red;
color: white;
align-items: center;
justify-content: center;
margin: 0 auto;
/*
50vh – это половина высоты экрана, а не контейнера, и если мы хотим отцентровать элемент относительно экрана пользователя, то нам потребуется ещё и вычесть половину размера кнопки, с чем и поможет функция calc.
*/
margin-top: calc(50vh - 25px);
/*
С помощью devTools посмотрите конечное значение margin-top.
*/
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.