How to vertically center second child in column of divs

Question

So I have two elements within a parent div. I would like the first one to be at the very top of the parent div, and the second one to always remain in the center of the div vertically. Like shown in the image below:

I have tried centering the second div using more parent divs that only take up certain percentages of the screen, but as the screen size changes the center menu moves away from the center of the screen. I have tried making another black box div and layering it over the first one, and then centering the menu vertically this way. I couldn't get it to work.

Here is a fiddle with what I have right now-- JSfiddle

Here is html-

<html>
<head>
    <link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<title>home</title>
</head>
<div data-viewport-height="100" class = "main">

    <div class="bgImage">
        <div class="blocks" id="topBlock"></div>
        <div class="blocks" id="bottomBlock"></div>
        <div id="mainContent">

            <div id="blackWrapper">
                    <h1>Cristiano Firmani</h1>
                    <nav class="main-nav">
                        <ul>
                            <li><a  href="#about">ABOUT</a></li>
                            <li><a  href="#software">SOFTWARE</a></li>
                            <li><a  href="#photography">PHOTOGRAPHY</a></li>
                            <li><a  href="#youtube">YOUTUBE</a></li>
                            <li><a  href="#contact">CONTACT</a></li>
                            <li><a  href="#support">SHOP</a></li>
                        </ul>
                    </nav>

            </div>
        </div>

    </div>

</div>
<body>
</body>
</html>

Here is css -

@charset "utf-8";

.main{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.bgImage{
    background-image:url("pics/bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height:100%;
}
.blocks{
    height:50%;
}
#topBlock{
    background-color:#4D606E;
    opacity:80%;
}
#bottomBlock{
    background-color:#D3D4D8;
    opacity:80%;
}
#mainContent{
    height:70%;
    width:60%;
    top:15%;
    left:20%;
    position:absolute;
    background-image:url("pics/bgCropped.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#blackWrapper{
    background-color:#121212;
    width:100%;
    height:100%;
    opacity:95%;
    text-align: center;
    display:flex;
    flex-direction: column;
    justify-content: center;

}

h1{
    font-family: 'Consuela Script';
    font-size:56px;
    color:#3FBAC2;
    margin:0;
    padding:0;

} 
.main-nav{

}
.main-nav ul{
    margin:0;
    padding:0;
    text-align:center;
}
.main-nav ul li{
    display:inline-block;
}

.main-nav ul li a{
    text-decoration: none;
    color:#3FBAC2;
    font-size:2vw;
    font-family: 'Norwester';
}
.main-nav ul li::before{
    content:'|';
    padding:0 12px 0 9px;
    font-size:2.3vw;
    font-family: 'Jason Statan';
    color:#3FBAC2;
}
.main-nav ul li:first-child::before{
    display: none;
}




@font-face {
    font-family: 'rotters';
    src: url("fonts/Rotters.woff2")format('woff2');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'Consuela Script';
    src: url('fonts/ConsuelaScriptRegular.woff2') format('woff2'),
        url('fonts/ConsuelaScriptRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Norwester';
    src: url('fonts/Norwester-Regular.woff2') format('woff2'),
        url('fonts/Norwester-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Jason Statan';
    src: url('fonts/JasonStatan.woff2') format('woff2'),
        url('fonts/JasonStatan.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

you can find your use case in the *long* accepted answer – Temani Afif Jan 05 '20 at 08:14 — Temani Afif, Jan 05 '20 at 08:14

nonopolarity · Accepted Answer · 2020-01-05T04:04:27.693

There are several methods, and it depends whether you want to make it work on Internet Explorer 11.

Position absolute: https://jsfiddle.net/trcmba5z/
Let them be two flex items, top and bottom, with the first one about 0.8 unit tall and the second one 1.2 unit tall: https://jsfiddle.net/Lh5t9zoa/ and let flexbox expand them for you.
Add an extra div or h1 at the bottom, and now, tell flexbox to expand the top and bottom flex items as much as possible vertically (using flex: 1 0 auto), and don't expand the middle flex item (using flex: 0 0 auto), and now your links are centered in the page: https://jsfiddle.net/87ohkz0q/

The third method works best on IE 11. Note that the font with 56px is really big on my Mac, so I changed it to 26px.

score 1 · Answer 2 · answered Jan 05 '20 at 03:15

If you make your h1 position:absolute you can keep your links centered on the page. Just set your h1 CSS to this:

h1 {
  font-family: 'Consuela Script';
  font-size:56px;
  color:#3FBAC2;
  margin:0;
  padding:0;
  /* <added> */
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* </added> */
}

JSFiddle: https://jsfiddle.net/re73vndf/

score 0 · Answer 3 · answered Jan 05 '20 at 04:38

                  <nav class="main-nav">
                    <ul>
                        <li><a  href="#about">ABOUT</a></li>
                        <li><a  href="#software">SOFTWARE</a></li>
                        <li><a  href="#photography">PHOTOGRAPHY</a></li>
                        <li><a  href="#youtube">YOUTUBE</a></li>
                        <li><a  href="#contact">CONTACT</a></li>
                        <li><a  href="#support">SHOP</a></li>
                    </ul>
                </nav>

If you want it to be vertically you can use display: flex in your css. like that:

li {
   display: flex;
   flex-direction: column;
 }

align-items: center; AND justify-content: center; can also be used to center it in the middle. but the display have to be flex so you can see changes.

How to vertically center second child in column of divs

3 Answers3