用于将div超过2个div的css指南

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

这是一个解决方案：

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元素，并为其添加了linear gradient背景;我使用线性渐变生成器，你可以通过谷歌搜索找到一个。接下来，我将容器元素的高度设置为100vh，这是浏览器窗口高度的100％; You can read about viewport units here

在容器中，我创建了一个.center-content元素，将内容定位为垂直在.container元素中居中，并始终距离容器边缘50px，而不管屏幕尺寸，您可以将此值更改为适合您需要的值。

在这个示例中，我将包含表单的元素设置为50vh，只显示它的外观，但是您可以删除它并在元素内添加内容，然后添加填充以定义它的尺寸。 / p>

Answer 2

你可以简单地在材质角度使用字体真棒图标

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

Answer 3

我在loginDiv的CSS中进行了以下更改所需的对齐，

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