3*30% divs won't vertical center and won't fit in a 100% parent-div

Question

I am trying to vertically center the three child-divs <div class="section"> as 3 rows in one column inside <div class="container_page_2">.

By vertically align I understand having the same distance between the top of the page and the first <div class="section"> and between the bottom of the page and the last/third <div class="section">.

I thought that by adding them inside a wrapper (<div class="center-container">) and center that wrapper inside the main container <div class="container_page_2"> will fix my issue, but I couldn't do it.

I would like to avoid using display: table; because, as I understand, it's quite old and rusty.

<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 is the CodePen for the above code.

This web-page is from a project-website that has 3 pages in total. The following divs are used for scroll-snap :

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

As to offer some more context, here is the whole project.

What do you think ?

They doesn't fit cuz they are not actually 30% height, but (30% + 1% top & bottom margin) height. Here's the possible solution - https://stackoverflow.com/questions/10808413/ . They doesn't center cuz they are block elements. Either make them inline-block/inline or let them have margin: 0 auto; . If you use flexbox you won't face any of these troubles. — lucifer63, Dec 17 '19 at 12:39
You should remove the "float:left" from .section. And I agree with lucifer63, it's easier with flexbox. — Raphael Deiana, Dec 17 '19 at 12:43
Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. — Paulie_D, Dec 17 '19 at 12:44
i made changes in your code. Please check. If any changes please let me know. — Revti Shah, Dec 17 '19 at 12:47
Wouldn't you be better off with a flex design. Using flex-basis instead of working with a block design. — Jens Ingels, Dec 17 '19 at 12:50
@lucifer63 I don't know how to use flexbox. I would appreciate something to get me started. — GeorgicaFaraFrica, Dec 17 '19 at 12:57

Brett DeWoody · Accepted Answer · 2019-12-17T14:14:39.490

Using a combo of Flexbox and vh units will allow you the CSS to be greatly simplified.

vh units allow us to discard many of the height: 100%; styles, and instead use a single height: 100vh; on the .container_page_2 element.

And Flexbox makes it super simple to vertically align the child element .center-container. We simply add a display: flex; flex-direction: columns; justify-content: center; to the .container_page_2 element.

Note: I have set the height of each row to 30px so the vertical centering is more obvious.

Flexbox can also be used to achieve the red/green split of the elements within each .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>

Is that what I've asked ? Oh my god I am terrible at asking questions. I don't want that. Even though the lesson about `flexbox` is nice. I want my 3 `.section` divs to be just like they are now: **rows**. I want to center-align the 3 rows to be, vertically, in the middle of the page. — GeorgicaFaraFrica, Dec 17 '19 at 13:53
The question is worded a little confusing. You want 1 column, 3 rows, vertically centered. I have updated the solution. — Brett DeWoody, Dec 17 '19 at 13:58
Not a problem at all. Asking great questions is a tough skill to master, especially on SO. — Brett DeWoody, Dec 17 '19 at 14:07
I have updated the question. Please read it again. Sorry for wasting your time. I do not care about the `
` or `
`. That is what's inside of the `
`. I want my sections to vertically align inside `.container_page_2`. — GeorgicaFaraFrica, Dec 17 '19 at 14:07
Yes, actually. How do I call that ? Does that alignment have a proper name ? I've just done the same thing by removing `.center-container` and adding the following inside `.container-page2` : `display: flex; flex-direction: column; justify-content:center; `. — GeorgicaFaraFrica, Dec 17 '19 at 14:12
That works as well. The `.center-container` is not necessary any longer. — Brett DeWoody, Dec 17 '19 at 14:13

Revti Shah · Answer 2 · 2019-12-17T13:01:50.370

Here is the code. Hope it will help you.You just need to add display:flex and justify-content: center in .container_page_2 .center-container .section. If any changes please let me know.

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>

I don't want to center `.container_page_2 .section .left-half.` I want to center the three `.container_page_2 .section` divs. — GeorgicaFaraFrica, Dec 17 '19 at 12:51
@GeorgicaFaraFrica Okay Got it. Please give me some time. I will solve it. — Revti Shah, Dec 17 '19 at 12:53

3*30% divs won't vertical center and won't fit in a 100% parent-div

2 Answers2