Несколько лет назад задача нарисовать поместить кнопку (или любой другой объект) ровно по центру экрана вызывала некоторые трудности. У меня сохранился старый вариант решения проблемы, включающий в себя свойство display: table и много строк кода. Сейчас же это делается очень просто и быстро.
Собственно, весь код html выглядит так:
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/reset.css">
<link href="css/style.css" type="text/css" rel="stylesheet">
<title>Кнопка по центру</title>
</head>
<body>
<div class="window">
<a class="button" href="">Кнопка</a>
</div>
</body>
</html>
Можно было обойтись и без дополнительного div’а, но я оставила его для наглядности. Кроме того, на странице могут быть и другие элементы.
Про верстке я всегда сбрасываю стили, подключая файл reset.css, чтобы стили браузера не мешали. Иначе были бы дополнительные поля и отступы.
Файл стилей выглядит так:
body {
height: 100%;
min-height: 500px;
background-color: #ddd;
box-sizing: border-box;
font-family: Roboto, sans-serif;
}
.window {
background: url(../images/1.jpg) center no-repeat;
background-size: cover;
height: 100vh;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.button {
display: block;
width: 100px;
padding: 15px 40px;
color: #fff;
background-color: #2153b3;
border-radius: 25px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
}
Здесь окно растягивается на всю ширину экрана и ему задается свойство flex. И все flex-элементы располагаются по центру как по горизонтали, так и по вертикали.
Результат можно посмотреть здесь.