始终在页面上居中标题、输入和提交按钮答案

【问题标题】：Always center heading, input and submit-button on a page始终在页面上居中标题、输入和提交按钮
【发布时间】：2021-10-17 05:36:37
【问题描述】：

我知道这可能是最初学者的问题之一。我只是想重新学习一点 CSS，我想从一些好的实践开始。

我想创建一个非常非常简单的页面，只有一个标题和一个输入框。

我有一些看起来像这样的 html：

    <body>
        <h1>Heading 1</h1>
        <div class="box">
            <div class="box-child">
                <input type="text" name="name" value="value" class="btn">
            </div>
            <div class="box-child">
                <input type="submit" value="send to some database" class="inp">
            </div>
        </div>
    </body>

还有一些看起来像这样的随机 CSS：

html {
    position: relative;
    top: 40%;
    left: 40%;
}



.box {}

.box-child{}

.btn {}

.inp{}

我使用整个html 元素来设置定位。我知道这很可怕，根本没有任何好的做法。但是当像我这样的初学者看到它把东西放在页面的中心时，它首先看起来很有效。

这会导致：

现在我不只是寻求解决方案，而是寻求任何类型的资源。也许还有其他关于SO的答案。我只是真的想确保我可以用一种相当灵活的方法来解决这个超级简单的任务，并且可以被认为是好的做法。

【问题讨论】：

标签： html css position center

【解决方案1】：

看看这就是你想要的？？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  
  /* grid-method */
  display: grid;
  place-items: center;
  
  /* flex-method */
  /* display: flex;
  align-items: center;
  justify-content: center; */
}

.container {
  display: flex;
  flex-direction: column;
}

<div class="container">
  <h1> Simple Input and Button </h1>
  <br /> <!--for spacing-->
  <input type="text" />
  <button type="submit"> Submit </button>
</div>

您可以相应地或根据需要更改元素样式。

【讨论】：