3 * 30％的div不会垂直居中，也不适合100％的父div

Question

我试图将三个子级<div class="section">垂直居中放置在<div class="container_page_2">内的一列中的3行中。

通过垂直对齐，我知道页面顶部和第一个<div class="section">之间以及页面底部和最后一个/第三个<div class="section">之间具有相同的距离。

我认为，通过将它们添加到包装器（<div class="center-container">）中并将该包装器居中放置在主容器<div class="container_page_2">中，可以解决我的问题，但是我做不到。

我想避免使用display: table;，因为据我所知，它已经很老而且生锈了。

<div id="parent-container">
  <div id=child-container>
      <!-- #page2 -->
      <div class="container_page_2">
          <div class="center-container">
              <div class="section">
                  <div class="left-half s1">

                  </div>
                  <div class="right-half s1">

                  </div>
              </div>
              <div class="section">
                  <div class="left-half s2">

                  </div>
                  <div class="right-half s2">

                  </div>
              </div>
              <div class="section">
                  <div class="left-half s3">

                  </div>
                  <div class="right-half s3">

                  </div>
              </div>
          </div>
      </div>
  </div>
</div>

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* *** index.html - START *** */

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#parent-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#child-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px; /* exact value is given through JavaScript */
    overflow: auto;
    scroll-snap-type: both proximity;
}

.container_page_2 {
    width: 100%;
    height: 100%;
    background-color: green;
    scroll-snap-align: center;
    position: relative;
}

.container_page_2 .center-container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
}

.container_page_2 .center-container .section {
    /* position: relative; */
    margin: 1% 0;
    width: 100%;
    height: 30%;
    float: left;
    border: 2px solid rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    /* z-index: 1; */
    /* text-align: center; */
}

/* *** index.html - END *** */

Here是以上代码的CodePen。

此网页来自一个项目网站，共有3个页面。 以下div用于scroll-snap：

<div id="parent-container">
  <div id=child-container>

要提供更多背景信息，here是整个项目。

您怎么看？

Answer 1

使用Flexbox和vh units的组合将大大简化CSS。

vh单元允许我们丢弃许多height: 100%;样式，而在height: 100vh;元素上使用单个.container_page_2。

Flexbox使得垂直对齐子元素.center-container非常简单。我们只需在display: flex; flex-direction: columns; justify-content: center;元素中添加一个.container_page_2。

注意：我将每行的高度设置为30px，因此垂直居中更加明显。

Flexbox也可以用于实现每个.section中元素的红色/绿色拆分。

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body,
html {
  height: 100vh;
  overflow: hidden;
}

#child-container {
  /* exact value is given through JavaScript */
  overflow: auto;
  scroll-snap-type: both proximity;
}

.container_page_2 {
  height: 100vh;
  background-color: green;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.container_page_2 .section {
  height: 30px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.section {
  display: flex;
  margin: 1vh 2vw;
}

.section .left-half,
.section .right-half {
  flex: 1;
}

.left-half {
  background-color: red;
}

<div id="parent-container">
  <div id="child-container">
    <div class="container_page_2">
      <div class="section">
        <div class="left-half s1">

        </div>
        <div class="right-half s1">

        </div>
      </div>
      <div class="section">
        <div class="left-half s2">

        </div>
        <div class="right-half s2">

        </div>
      </div>
      <div class="section">
        <div class="left-half s3">

        </div>
        <div class="right-half s3">

        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

这是代码。希望对您有所帮助。您只需在 .container_page_2 .center-container .section 中添加 display：flex 和 justify-content：center 。如果有任何更改，请告诉我。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* *** index.html - START *** */

body, html {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#parent-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#child-container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px; /* exact value is given through JavaScript */
    overflow: auto;
    scroll-snap-type: both proximity;
}

.container_page_2 {
    width: 100%;
    height: 100%;
    background-color: green;
    scroll-snap-align: center;
    position: relative;
}

.container_page_2 .center-container {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
}

.container_page_2 .center-container .section {
    /* position: relative; */
    margin: 10px 0;
    width: 100%;
    height: 30%;
    border: 2px solid rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    /* z-index: 1; */
    /* text-align: center; */
    display: flex;
    justify-content:center;
}

.container_page_2 .section .left-half {
    /* display: block; */
    width:45%;
    height: 100%;
    background-color: red;

}

/* *** index.html - END *** */

<div id="parent-container">
        <div id=child-container>
            <!-- #page2 -->
            <div class="container_page_2">
                <div class="center-container">
                    <div class="section">
                        <div class="left-half s1">
    
                        </div>
                        <div class="right-half s1">
    
                        </div>
                    </div>
                    <div class="section">
                        <div class="left-half s2">
    
                        </div>
                        <div class="right-half s2">
    
                        </div>
                    </div>
                    <div class="section">
                        <div class="left-half s3">
    
                        </div>
                        <div class="right-half s3">
    
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>