I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within
<div class="container_page_2">When I refer to vertical alignment, I mean having an equal distance between the top of the page and the first <div class="section">, and also between the bottom of the page and the last/third <div class="section">.
I assumed that by placing them inside a wrapper (
<div class="center-container"><div class="container_page_2">I prefer not to use display: table; because it is considered outdated.
<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 particular web-page is part of a project-website that includes a total of 3 pages.
The following divs are used for scroll-snap:
<div id="parent-container">
<div id=child-container>
For further context, you can view the entire project here.
What are your thoughts?