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

基于.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;      
}

请注意，根据justify-content上align-items / css-grid-item的设置方式，示例2可能有效，也可能无效。

假设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>

Answer 2

看到这个我使用display fixed，table和table cell

.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

指定除100vh以外的flexbox的高度

2 个答案: