Как отцентрировать модальное окно по вертикали, вне зависимости от высоты экрана, за вычетом хэдера, пробовал margin:auto, также пробовал position:absolute применять, ничего не помогает, смотрел похожие вопросы здесь и ничего не нашел, подскажите пожалуйста как решить проблему? идей совсем нет, код прилагается, в комментарии в коде CSS указал с каким блоком проблема(205 строка), модальное окно вызывается при нажатии на sign up
@import "reset.css";
* {
box-sizing: border-box;
}
body {
background-color: #E5E5E5;
}
.container {
/* width: 1366px; */
min-height: 100vh;
/* margin: 0 auto; */
background-image: url(../img/background.jpg);
background-size: cover;
}
.container2 {
width: 100%;
position: relative;
}
header {
display: inline-flex;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.logo {
text-decoration: none;
padding: 20px 80px;
text-transform: uppercase;
font-family: Ubuntu, sans-serif;
font-weight: bold;
font-size: 20px;
color: #FFFFFF;
}
.green {
color: #3CB878;
}
.logo:hover {
color: #3CB878;
}
.right_menu {
display: flex;
justify-content: flex-end;
width: 100%;
}
.icons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 137px;
height: 60px;
}
/* .ic_calendar {
width: 20px;
height: 20px;
background: url('../img/css_sprites.png') -106px -49px;
}
.ic_forum {
width: 28px;
height: 20px;
background: url('../img/css_sprites.png') -58px -10px;
}
.ic_journey {
width: 20px;
height: 20px;
background: url('../img/css_sprites.png') -50px -50px;
}
.ic_calendar:hover {
width: 20px;
height: 20px;
background: url('../img/css_sprites.png') -106px -10px;
}
.ic_forum:hover {
width: 28px;
height: 20px;
background: url('../img/css_sprites.png') -10px -10px;
}
.ic_journey:hover {
width: 20px;
height: 20px;
background: url('../img/css_sprites.png') -10px -50px;
} */
/* НОВЫЙ СПРАЙТ */
.icon {
display: inline-block;
background: url('../img/sprite.png') no-repeat;
overflow: hidden;
/* text-indent: -9999px;
text-align: left; */
}
.icon.forum-1 {
background-position: -5px -0px;
width: 28px;
height: 20px;
}
.icon.journey-1 {
background-position: -5px -50px;
width: 20px;
height: 21px;
}
.icon.caledar-1 {
background-position: -5px -100px;
width: 20px;
height: 20px;
}
.icon.caledar-1:hover {
background-position: -5px -124px;
width: 20px;
height: 20px;
}
.icon.forum-1:hover {
background-position: -5px -25px;
width: 28px;
height: 20px;
}
.icon.journey-1:hover {
background-position: -5px -75px;
width: 20px;
height: 21px;
}
.auth {
display: flex;
align-items: center;
width: 197px;
height: 14px;
margin: auto 60px;
}
.log_in {
font-family: Ubuntu, sans-serif;
font-size: 14px;
line-height: 21px;
color: #FFFFFF;
}
.sign_up {
font-family: Ubuntu, sans-serif;
font-size: 14px;
line-height: 21px;
color: #FFFFFF;
}
.log_link {
color: #FFFFFF;
text-decoration: none;
}
.log_link:hover {
color: #3CB878;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.popup:target {
visibility: visible;
opacity: 1;
}
.popup__overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.0);
}
/* НУЖНО ОТЦЕНТРИРОВАТЬ БЛОК НИЖЕ */
.popup__box {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 444px;
height: 584px;
background: #FFFFFF;
box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
position: relative;
overflow: auto;
}
.green_squad {
position: absolute;
display: block;
top: 29px;
width: 18px;
height: 18px;
background-color: #3CB878;
}
.sign_log {
display: flex;
justify-content: space-between;
width: 324px;
margin: 29px auto 19px;
}
.modal_sign {
font-family: Ubuntu, sans-serif;
font-size: 20px;
line-height: 15px;
color: #434343;
}
.modal_login {
text-decoration: none;
color: #3CB878;
font-family: Ubuntu, sans-serif;
font-size: 14px;
line-height: 21px;
}
.social_buttons {
display: flex;
justify-content: space-between;
width: 74%;
margin: 0 auto 23px;
}
.fb {
display: flex;
justify-content: space-between;
font-family: Ubuntu, sans-serif;
width: 49%;
padding: 0 20px;
font-size: 16px;
line-height: 48px;
align-items: center;
color: #FFFFFF;
background: #305DB8;
text-decoration: none;
border-radius: 4px;
}
.fb_img {}
.fb_img::after {
display: inline-block;
vertical-align: middle;
padding-left: 17px;
background: transparent;
content: "";
width: 1px;
height: 28px;
border-right: 1px solid rgba(10, 22, 47, 0.1);
}
.google {
display: flex;
justify-content: space-between;
font-family: Ubuntu, sans-serif;
width: 49%;
padding: 0 30px 0 15px;
font-size: 16px;
line-height: 48px;
align-items: center;
color: #FFFFFF;
background: #DF4A32;
text-decoration: none;
border-radius: 4px;
}
.google_img {}
.google_img::after {
display: inline-block;
vertical-align: middle;
padding-left: 9px;
background: transparent;
content: "";
width: 1px;
height: 28px;
border-right: 1px solid rgba(10, 22, 47, 0.1);
}
.or {
display: flex;
width: 74%;
margin: 0 auto;
align-items: center;
justify-content: space-between;
font-family: Ubuntu, sans-serif;
font-size: 14px;
line-height: 21px;
color: #848484;
}
.left_line{
width: 40%;
border-bottom: 1px solid #F2F2F2;
}
.right_line{
width: 40%;
border-bottom: 1px solid #F2F2F2;
}
.input_fields {
width: 74%;
margin: 15px auto 15px;
}
.input1 {
width: 100%;
height: 46px;
margin-bottom: 9px;
border: 1px solid #F2F2F2;
border-radius: 4px;
padding: 16px 0 16px 18px;
}
::-webkit-input-placeholder {
color: #BEBEBE;
font-family: Ubuntu, sans-serif;
font-size: 14px;
}
::-moz-placeholder {
color: #BEBEBE;
font-family: Ubuntu, sans-serif;
font-size: 14px;
}
:-moz-placeholder {
color: #BEBEBE;
font-family: Ubuntu, sans-serif;
font-size: 14px;
}
:-ms-input-placeholder {
color: #BEBEBE;
font-family: Ubuntu, sans-serif;
font-size: 14px;
}
:focus::-webkit-input-placeholder {
color: transparent;
}
:focus::-moz-placeholder {
color: transparent;
}
:focus:-moz-placeholder {
color: transparent;
}
:focus:-ms-input-placeholder {
color: transparent;
}
.input1:focus {
width: 100%;
height: 48px;
background: #FFFFFF;
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.21);
border-radius: 4px;
}
.checkbox1 {
margin: 10px 0 28px 0;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]+label:before {
content: "\2713";
color: transparent;
display: inline-block;
text-align: center;
vertical-align: middle;
font-size: 20px;
font-weight: bold;
margin: -5px 5px 0 0;
height: 20px;
width: 20px;
border: 1px solid #F2F2F2;
}
input[type=checkbox]:checked+label:before {
color: #3CB878;
}
.checklabel {
font-family: Ubuntu, sans-serif;
font-size: 14px;
color: #434343;
}
.checkbox1 a {
text-decoration: none;
font-family: Ubuntu, sans-serif;
font-size: 14px;
color: #3CB878;
}
.button1 {
font-family: Ubuntu, sans-serif;
color: #ffffff;
width: 100%;
height: 46px;
background: #3CB878;
border-radius: 4px;
border: none;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/main.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700&display=swap" rel="stylesheet">
<title>Jorney</title>
</head>
<body>
<div class="container">
<header>
<a href="#" class="logo">journay</a>
<div class="right_menu">
<div class="icons">
<a href="#" class="icon caledar-1"></a>
<a href="#" class="icon forum-1"></a>
<a href="#" class="icon journey-1"></a>
</div>
<div class="auth">
<span class="log_in">Welcome, <a href="#" class="log_link">Log In</a></span>
<span class="sign_up">Or <a href="#popup1" class="log_link">Sign Up</a></span>
</div>
</div>
</header>
<div class="container2">
<div id="popup1" class="popup">
<a href="#" class="popup__overlay"></a>
<div class="popup__box">
<div class="green_squad"></div>
<div class="sign_log">
<span class="modal_sign">Sign Up</span>
<a href="#" class="modal_login">Log In</a>
</div>
<div class="social_buttons">
<a href="#" class="fb">
<div class="fb_img"><img src="img/fb.png" alt="facebook"></div>Facebook
</a>
<a href="#" class="google">
<div class="google_img"><img src="img/g+.png" alt="google+"></div>Google+
</a>
</div>
<div class="or"><div class="left_line"></div><span>or</span><div class="right_line"></div></div>
<form action="" method="POST" class="input_fields">
<label><input type="text" placeholder="First Name" class="input1" ></label>
<label><input type="text" placeholder="Last Name" class="input1" ></label>
<label><input type="email" placeholder="Enter Email" name="email" class="input1" required></label>
<label><input type="password" placeholder="Choose Password" class="input1" required></label>
<label><input type="password" placeholder="Confirm Password" class="input1" required></label>
<div class="checkbox1">
<input type="checkbox" id="check" name="check" required/>
<label for="check" class="checklabel">Agree our</label>
<a href="#">Terms & Conditions</a>
</div>
<button name="submit" type="submit" class="button1">Create Account</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>