1

Как отцентрировать модальное окно по вертикали, вне зависимости от высоты экрана, за вычетом хэдера, пробовал 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>&nbsp; &nbsp;
                    <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 &amp; Conditions</a>
                    </div>
                    <button name="submit" type="submit" class="button1">Create Account</button>
                </form>
            </div>
        </div>
    </div>
    </div>
</body>

</html>

3 ответа 3

2

Вот так, для блока .popup__box добавить:

top: 50%;
transform: translateY(calc(-50% + 0px)); // 0px заменить на нужное число. У вас 32px

@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;
  margin: auto;
  width: 444px;
  height: 584px;
  background: #FFFFFF;
  box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.52);
  position: relative;
  overflow: auto;
left: 0;
top: 50%; /*Добавить*/
transform: translateY(calc(-50% + 32px));/*Добавить*/
}

.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>&nbsp; &nbsp;
          <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 &amp; Conditions</a>
            </div>
            <button name="submit" type="submit" class="button1">Create Account</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

1
  • премного благодарен) работает
    – Oleh F.
    31 мар 2020 в 16:02
1

Добавьте в стили:

.popup:target {
  display: flex;
  align-items: center;
}
3
  • работает, но не совсем так как планировалось, нужно еще вычесть как-то хэдер
    – Oleh F.
    31 мар 2020 в 15:46
  • а при чем тут хедер?
    – vantal
    31 мар 2020 в 15:50
  • нужно отцентрировать по вертикали за вычетом хэдера, вот это вроде работает top: 50%; transform: translateY(calc(-50% + 0px));
    – Oleh F.
    31 мар 2020 в 15:59
1

Вот эта часть выровняет элемент по центру

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

Сначала сдвигаем всю модалку на 50% во всех направлениях, затем свойством translate подвигаем в центр.

.aka-body {
  height: 400px;
  width: 100%;
}

.header {
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  color: #fff;
}

.modal {
  width: 50%;
  height: 150px;
  background-color: #ccc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="aka-body">
  <div class="header">
    header
  </div>
  <div class="modal">
    modal content here
  </div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.