指定 100vh 以外的 flexbox 高度

Question

我里面有一个form里面有一个div里面。 div 在另一个 div.

里面

<div class="div__signup"> <!-- takes the complete width/height of content section -->
  <div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
    <form class="signup-form" actions="">
      <label for="firstname" class="first-name">First Name</label>
      <input id="firstname" type="text">

      <label for="lastname" class="last-name">Last Name</label>
      <input id="lastname" type="text">

      <label for="email" class="email"> Email</label>
      <input id="email" type="email">

      <label for="password" class="password">Password</label>
      <input id="password" type="password">

      <label for="verify-password" class="verify-password">Verify Password</label>
      <input id="verify-password" type="password">
    </form>
  </div>
</div>

这个 html 在一个 css-grid 里面，它有 3 行 - 导航、内容和页脚。

.css-grid-container{
  height:100vh; /*???*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row (content) is 15 times larger than the 3rd row (footer).*/
}

我希望表单页面的 html 位于 css-grid 的内容部分的中心。如果我使用 flexbox，我想我必须为 flexbox 提供特定的高度。我知道的唯一高度参数是 100vh ，它等于视口的高度。

.div__signup{
  display:flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /*need something else than 100vh as I dont want alignment w.r.t viewport */
}

但我希望表单位于网格内容部分的中心，而不是视口的中心。如何将表单与内容部分的中心对齐？

Answer 1

看到这个我使用固定显示，table 和 table 单元格

.seline-preloader {
  position: fixed;
  left: 0px;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: #ffffff;
  display: block;
  box-sizing: border-box;
}

.table {
  display: table;
  width: 100%;
  height: 100%;
  background-color: transparent !important;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

.table-cell {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

<section class="seline-preloader">
  <div class="table">
    <div class="table-cell">
      <h2 class="hide">Form</h2>
     
     <!--start of your code-->
     <div class="div__signup">
        <!-- takes the complete width/height of content section -->
        <div class="content_div--white">
          <!-- contains the form. Adjust this div to create a border around the form -->

          <form class="signup-form" actions="">
            <label for="firstname" class="first-name">First Name</label>
            <input id="firstname" type="text">

            <label for="lastname" class="last-name">Last Name</label>
            <input id="lastname" type="text">

            <label for="email" class="email"> Email</label>
            <input id="email" type="email">

            <label for="password" class="password">Password</label>
            <input id="password" type="password">

            <label for="verify-password" class="verify-password">Verify Password</label>
            <input id="verify-password" type="password">
          </form>

        </div>
      </div>
      <!--end of your code-->
      
    </div>
  </div>
</section>

jsfiddle

Answer 2

基于 .div__signup 是 网格项 的子项这一事实，这里有两个建议：

使用绝对位置

.css-grid-item {
  position: relative;
}

.div__signup {
  position: absolute;
  left: 0; top: 0; 
  right: 0; bottom: 0;

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

将网格项设为弹性容器

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

请注意，样本 2 可能有效，也可能无效，具体取决于 css-grid-item/align-items 在 css-grid-item 上的设置方式。

假设HTML

<div class="css-grid-item">

    <div class="div__signup"> <!-- takes the complete width/height of content section -->
      <div class="content_div--white"> <!-- contains the form. Adjust this div to create a border around the form -->
        <form class="signup-form" actions="">
          <label for="firstname" class="first-name">First Name</label>
          <input id="firstname" type="text">

          <label for="lastname" class="last-name">Last Name</label>
          <input id="lastname" type="text">

          <label for="email" class="email"> Email</label>
          <input id="email" type="email">

          <label for="password" class="password">Password</label>
          <input id="password" type="password">

          <label for="verify-password" class="verify-password">Verify Password</label>
          <input id="verify-password" type="password">
        </form>
      </div>
    </div>

</div>

指定 100vh 以外的 flexbox 高度

specify height of flexbox other than 100vh

html

css

flexbox

css-grid