CSS руководство по центрированию деления на 2 деления

Question

Я новичок в CSS (не могу правильно расположить элементы HTML), и я создаю форму для входа в угловое приложение, я использую дизайн материалов.

Я хочу создать страницу входа в систему следующим образом,

В моем приложении у меня есть следующий код,

<div class="firstDiv"></div>
<div class="secondDiv"></div>
<div class="loginDiv">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>
  <br/>
  <mat-form-field>
    <input matInput placeholder="Textarea">
  </mat-form-field>
</div>

ПРИМЕЧАНИЕ. Я изменю данные для входа в систему, как указано в примере изображения для входа, как указано выше.

Файл CSS выглядит следующим образом:

.firstDiv {
    height: 40%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    position: absolute;
    background-color: orangered;
    display: inline-block;
}

.secondDiv {
    position: absolute;
    width: 100%;
    bottom: 0;
    height: 60%;
    left: 0;
    right: 0;
    background-color:whitesmoke;
    display: inline-block;
}

.loginDiv {
    position: absolute;
    transform: translate(-50%, -50%);
    border: black;
    background-color:white;
    display: flex;
    flex-direction: column;
}

Я не могу получитьформа по мере необходимости, а также при уменьшении размера экрана форма входа в систему не соответствует размеру экрана и детали входа в систему путаются.

Answer 1

Я получил необходимое выравнивание со следующими изменениями в CSS для loginDiv,

.loginDiv {
    border: 1px solid black;
    background: yellow;
    left: 50%;
    position: absolute;
    top: 28%;
    transform: translate(-50%);
}

Answer 2

Вот решение:

body {
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  background: #ddd;
  background-color: #23bdf5;
  background: linear-gradient(to bottom, #34b9f7 0%, #34b9f7 40%, #f0f0f0 40%, #f0f0f0 100%);
  position: relative;
  text-align: center;
  overflow: auto;
}

.center-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50px;
  right: 50px;
}

.form-element {
  height: 50vh;
  background: white;
}

<div class="container">
  <h1>Title</h1>
  <div class="center-content">
    <div class="form-element">
      this is where your form would go
    </div>
  </div>
</div>

Работает следующим образом:

Сначала я создаю элемент .container для страницы и добавляю линейный градиент фон к нему;Я использовал генератор линейного градиента, который можно найти, просто погуглив.Затем я установил высоту элемента контейнера равной 100vh, что составляет 100% высоты окна браузера; Вы можете прочитать о единицах просмотра здесь .

Внутри контейнера я создаю элемент .center-content, чтобы позиционировать содержимое как по вертикали с центром в элементе .containerи всегда в 50px от края контейнера, независимо от размера экрана, вы можете изменить это значение на любое, которое вам подходит.

В этом примере я установил элемент, который будет содержать форму, равным 50vh, просто покажитевы, как это будет выглядеть, но вы можете удалить это и добавить содержимое внутри элемента, а затем добавить отступы, чтобы определить его размеры.

Answer 3

Вы можете просто использовать шрифт Awesome Icon в материале угловой также

 <i class="fa fa-user" aria-hidden="true"></i>