在页面上垂直和水平居中表格

Question

我想在页面上居中放置一个表单，我已经做到了。不过，我有一个问题：当我调整浏览器窗口的大小并且高度减小时，我希望表单保持在导航栏下方并且页面溢出并允许我滚动，以便查看表单的其余部分。相反，它将自己定位在导航栏上方。

我尝试将表单包含在另一个容器 div 中，尝试使用不同的位置值，但我没有成功获得我想要的。有没有简单的方法？

#navbar {
  background-color: blue;
  width: 100%;
  height: 50px;
  border: 1px solid black;
}

.test_form {
  /* Center the form on the page vertically */
  margin: 0 auto;
  /* Center both vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* Center both vertically and horizontally */
  min-width: 400px;
  width: 28vw;
  max-width: 550px;
  /* Form outline */
  padding: 1em;
  border: 2px solid #192D4D;
  border-radius: 2em;
}

@media only screen and (max-height: 500px) {
  .test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    /* Just to know when it switches */
    background-color: red;
  }
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 100px;
  text-align: center;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;
  /* Uniform text field size */
  width: 100%;
  box-sizing: border-box;
  /* Match form field borders */
  border: 1px solid #999;
  background-color: #F1F9FF;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #192D4D;
  letter-spacing: 1px;
  font-size: 0, 8rem;
  text-align: center;
  background-color: #ADBEDA;
}

td,
th {
  border: 1px solid #5C6F8C;
  padding: 5px 10px;
  text-align: left;
}

.submit-button {
  margin-left: calc(1em + 2vw);
  min-width: 100px;
  width: 8vw;
  max-width: 150px;
}

<div id='navbar'>

</div>

<br>
<form class="test_form">
  <table border="1">
    <thead>
      <tr>
        <th colspan="2" scope="row">Table form</th>
      </tr>
    </thead>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><input value='asda'></td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><textarea>asdads</textarea></td>
    </tr>
  </table>
  <br>
  <input class="submit-button" type="submit" value="Submit" />
</form>

@media 下方的 CSS 是我之前使用的代码，它只将表单水平居中，但它在垂直位置方面具有所需的行为（保持在导航栏下方和溢出）。

https://jsfiddle.net/o4u28qxv/1/

Answer 1

在媒体查询中将position: static; 和transform: none; 添加到.test_form 的规则中 - 这将使元素进入正常流程并重置由transform 引起的任何偏移。

https://jsfiddle.net/0ed68aqo/

Answer 2

在 html&body 中，您有几个选项可以让您的内容以 X/Y 为中心而没有位置：

灵活的可能性

body {
margin:0;
display:flex;
flex-direction:column;
height:100vh;
}

div {margin:auto;width:/* if needed*/;}

nav{background:lightgreen}
div {background:lightblue;}

<nav> navbar any height</nav>
<div>any content here of any size </div>

网格可能性

body {
margin:0;
display:grid;
grid-template-rows: auto 1fr;
height:100vh;
}

div {margin:auto;width:/* if needed*/;}

nav{background:lightgreen}
div {background:lightblue;}

<nav> navbar any height</nav>
<div>any content here of any size </div>

Answer 3

您可以使用 flexbox 来使表单居中，而不是使用位置和变换。它需要更少的代码，并且根据我的经验，它始终可以在所有设备上运行，除非您需要 8 年以上旧浏览器或 Internet Explorer 的支持。

所以，对于一些代码，我把你写的东西编辑成这样，它对我有用

#navbar{
  background-color:blue;
  width:100%;
  height:50px;
  border:1px solid black;
}

.test_form {
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
}

@media only screen and (max-height: 500px) {
.test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;    
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    background-color:red;
    }
}


label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 100px;
    text-align: center;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* Uniform text field size */
    width: 100%;
    box-sizing: border-box;

    /* Match form field borders */
    border: 1px solid #999;
    background-color:#F1F9FF;
}

textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
}

table {
    width:100%;
    border-collapse: collapse;
    border: 2px solid #192D4D;
    letter-spacing: 1px;
    font-size: 0,8rem;
    text-align: center;
    background-color:#ADBEDA;
}

td, th {
    border: 1px solid #5C6F8C;
    padding: 5px 10px;
    text-align: left;
}

.submit-button {
    margin-left: calc(1em + 2vw);
    min-width:100px;
    width: 8vw;
    max-width:150px;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: center;
        
}

<div id='navbar'>

</div>

<br>
<div class="flex">
  <form class="test_form">
    <table border="1">
      <thead>
        <tr><th colspan="2" scope="row">Table form</th></tr>
      </thead>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><input value='asda'></td></tr>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><textarea>asdads</textarea></td></tr>
    </table>
    <br>
    <input class ="submit-button" type="submit" value="Submit" />
  </form>

</div>

简而言之，我从 CSS 中删除了 .test_form 类中的位置和变换规则。用 .flex 类将您的表单包装起来，并将 flexbox 代码添加到 CSS 中。

display: flex 使 div 表现得像一个 flexbox 容器，它的子元素作为 flexbox 元素

align-items垂直对齐div的内容

justify-content水平对齐div的内容

Answer 4

在<div> 中包含<form>

<div class="container">
    <form class="test_form">
        .............................
    </form>
</div>

我建议只使用margin: [value] auto; 居中。删除 position: absolute 和实现中心位置中包含的互补样式