Вы пытаетесь использовать align-items
, который является свойством гибкого элемента, для элемента div, который не является гибким элементом.
Кроме того, вы пытаетесь выполнить выравнивание на экране, но ваш html
и body
не установлен height: 100%
.
Чтобы продемонстрировать, вы можете добавить style="height: 100vh; display: flex;"
к родителю div
. Как вы можете видеть ниже, карта выравнивается по центру.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
/*---Media Queries --*/
@media (max-width: 992px) {
}
@media (max-width: 768px) {
}
@media (max-width: 576px) {
}
a {
color: #d7eaf4;
}
body {
color: #fff;
background: #2834d8 url(img/hotel.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
font-family: poppins,Helvetica,Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0!important;
}
.footer {
font-size: 14px;
padding-left: 1rem!important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fixed-bottom {
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
.h-100 {
height: 100%!important;
}
.navbar {
background: rgba(18,13,33,.8);
color: #d7eaf4;
box-shadow: 0 5px 15px #000000c0;
margin-top: 0;
margin-bottom: 0;
}
#fixed {
background-image: url('img/mac.png');
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
.card {
margin: 0 auto; /* Added */
float: none; /* Added */
margin-bottom: 10px; /* Added */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#0e1a33" />
<title>Hotel Morenka Cipa</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="theme.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href=""><img></a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ranking</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Support</a>
</li>
</ul>
</div>
</nav>
<footer class="footer fixed-bottom">
Copyright © 2020 Kuba Wroński & Mateusz Gołębiowski
</footer>
<div class=" d-dlex justify-content-center align-items-center a div" style="height: 100vh; display: flex;">
<div class="d-dlex justify-content-center align-items-center a div">
<div class="card">
<div class="card-body text-center">
<h5 class="card-title mb-2">hihihihihih</h5>
<div class="card-subtitle mb-3">hihihihi<a href="#" target="_blank">hihihihi</a></div>
<form id="generateSignatureForm" method="post" action="/?/api/generateSignature">
<input id="generateSignatureUsername" class="form-control form-control-sm mb-3" type="text" placeholder="Username" name="username" required="">
<input name="csrf" type="hidden" value="46d2ce8a-2271-471f-a46f-c58234324e99">
</form>
</div>
</div>
</div>
</div>
</body>
</html>