Javascript 在页面中心使用引导主题和对齐表单

我想把我的表格放在我页面的中心（就像在谷歌主页上），但是我在这样做时遇到了问题。我正在黑暗地使用Bootswatch主题（从CDN托管）

在app.component.html中，我有：

<div>

      <div class="containercenter">
        <form>
          <fieldset>
            <div class="form-group">
              <label for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
          </fieldset>
        </form>
      </div>

</div>

我在css文件中尝试了各种方法，包括填充、高度、宽度、对齐内容等等，。。。但这些似乎都不起作用。我也尝试过摆弄HTML/引导id或类，不同的div。但一切都没有奏效

如何为我的网页创建类似谷歌的布局

有关更多信息，请参见：

将您的

#containercenter

更改为

.containercenter

，并将css更改为以下内容

        .containercenter {
        width: 50%;
        margin: 0 auto;
        }

目前，您的代码没有做任何事情，因为您已经定义了一个containercenter类，但是您已经在css中指定使用containercenter查找

id

.classname

用于类，而

#idname

用于ID

当您使用id时，您的HTML将

<div id="containercenter">

---

希望这是有意义的，如果您需要，我很乐意进一步阐述。

您需要一个视口高度为100%的容器，检查html和body标记的高度是否至少为100%，然后使用Bootstrap 4 flex类轻松地在水平和垂直方向集中

app.component.css：

#containercenter {
  width: 100%;
  height: 100%;
  align-items: center;

}

html, body{
    width: 100%;
    height: 100%;
}
.containercenter{
    height: 100%;
}

删除该父div并执行以下操作

app.component.html

<div class="containercenter d-flex justify-content-center align-items-center">
    <form>
        <fieldset>
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        </fieldset>
    </form>
</div>

电子邮件地址
提交

引导Flexbox帮助程序：

如果您想了解css Flexbox的工作原理，这里有一个很好的指南：

---

现代web开发非常困难，这使得它水平居中，而不是垂直居中。我尝试了页边底部：0自动；页边距顶部：0自动；但这无助于填充顶部：100px会做你需要的事情。看看它，谷歌实际上也做了这件事：）有没有办法绕过px？让事情变得更灵活是件好事