Как переместить эту форму начальной загрузки 4 вертикально в центр экрана?

Question

Мы пытаемся переместить знак в форме с картой в центр экрана по вертикали, но проблема в том, что она остается в верхней части экрана.

HTML

<div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

css

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

Мы используем Bootstrap 4 с Angular.Как можно решить эту проблему?Как мы можем переместить знак в форме, когда его карточка перемещена в центр экрана по вертикали?

Answer 1

Это связано с тем, что высота .row или .row-form, в которой находится карточка входа, по умолчанию установлена ​​в соответствии с размером ее дочернего содержимого.

Дайте .form-row значение высоты 100% .form-row {height:100%}. Всего один урок. Надеюсь, это поможет. Попробуйте фрагмент.

:root {
  --input-padding-x: 1.5rem;
  --input-padding-y: .75rem;
}

.container-fluid {
    height: 150%;
    overflow: hidden;
    background: #FF512F; /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, rgba(221, 36, 118, 0.7), rgba(255, 81, 47, 0.2)), url('../../../assets/images/img1.jpg'); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background-size: cover;
    background-position: bottom;
    margin: 0px;
}

.container-fluid {
  height: 100vh;
}
    .container-fluid.form.signup {
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }
.card.card-signin.my-5,
.card.card-signup.my-5 {
 /* background-color: rgba(255, 255, 255, 0.6); */
  margin: 0 auto;
}
.col-sm-9.col-md-7.col-lg-5.mx-auto {
  align-items: center;
  display: flex;
  margin-top:0px
}

.form-row {
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid form">
    <div class="row">
        <div class="col-md-12  close-form">
            <a href="/" class="btn btn-circle button-image closeButton float-right"></a>
        </div>
    </div>
    <div class="row form-row ">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto signinform">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <h5 class="card-title text-center">Sign In</h5>
                    <div>
                        <div id="errorMsg" *ngIf="errorMessage">
                            <span>{{errorMessage}}</span>
                        </div>
                        <form action="" [formGroup]="SigninForm" (ngSubmit)="signinUser()">
                            <div class="form-group form-signin">
                                <input _ngcontent-c0="" class="form-control form-control-lg" placeholder="Username"
                                    type="text" id="username" formControlName="username" />

                            </div>
                            <div class="form-group form-signin">
                                <input class="form-control form-control-lg" placeholder="Password" type="password"
                                    formControlName="password" />
                            </div>
                            <div class="form-group form-signin">
                                <div class="extra-btns align-items-center">
                                    <a href="/request-reset-password" class="btn btn-link ">Forget password</a>
                                    <a href="/sign-up" class="btn btn-link ">Sign Up</a>
                                </div>
                                <div>
                                    <button type="submit" class="  btn form-btn btn-lg btn-block submit-btn">
                                        Sign In
                                        With Email
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

Вот решение, использующее flex:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;  
}

.close-button-container {
  text-align: right;
  padding: .5rem;
  font-size: .75rem;
}

.form-container {
  background: #e6e6e6;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form-card {
  border-radius: 10px;
  background: #fff;
  padding: 25px;
}

<body>
<div class="content">
    <div class="close-button-container">
        x Close
    </div>
    <div class="form-container">
        <div class="form-card">
            <h3>Login</h3>
            <div>
                <input type="text" placeholder="username" />
            </div>
            <div>
                <input type="password" placeholder="password" />
            </div>
            <div>
                <button>
                    Login
                </button>
            </div>
        </div>
    </div>
</div>
</body>

Вот что делает код:

Устанавливает height: 100% на теги html и body. Это позволит вам растянуть div.content, вертикально заполняя всю страницу.

После этого мы хотим, чтобы кнопка закрытия имела фиксированную высоту, и пусть div.form-container займет то, что осталось от страницы.

Согласно css-трюкам :

[flex-grow] определяет способность элемента flex расти в случае необходимости. Он принимает значение без единицы, которое служит пропорцией. Он определяет, какое количество доступного пространства внутри гибкого контейнера должно занимать элемент.

Если для всех элементов flex-grow установлено значение 1, оставшееся пространство в контейнере будет распределено поровну между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, оставшееся пространство займет в два раза больше места, чем остальные (или попытается, по крайней мере).

Таким образом, установка flex: 1 (сокращение flex-grow: 1) только для одного тега скажет браузеру растянуть этот тег и заполнить оставшееся пространство контейнера.

Теперь осталось только сказать div.form-container о размещении div.form-card в его центре; как вертикально, так и горизонтально. Это достигается с помощью align-items: center и justify-content: center.