there have so many way to make a item vertical align center . here is my way how i did
[![enter image description here][1]][1]
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.headerWrapper div#flex2 {
width:30%;
background-color: blue;
min-height: inherit;
max-height: inherit;
position:relative;
}
.headerWrapper nav{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
}
<!-- end snippet -->
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-size: 20px;
padding: 0px;
margin: 0px;
background-color: lightslategrey;
}
.gold {
color: gold;
}
.headerWrapper {
display: flex;
background-color: darkgrey;
min-height: 20px;
max-height: 100px;
}
.headerWrapper div#flex1 {
width:70%;
min-height: inherit;
max-height: inherit;
}
.headerWrapper div#flex2 {
width:30%;
background-color: blue;
min-height: inherit;
max-height: inherit;
position:relative;
}
.headerWrapper nav{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:100%;
}
.headerWrapper nav {
background-color: lightblue;
}
.headerWrapper ul {
}
.headerWrapper li {
display: inline;
list-style: none;
}
.headerWrapper a#li1, a#li2, a#li3 {
text-decoration: none;
text-transform: uppercase;
color: gold;
background-color: slategray;
font-size: 20px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Efficient construction with 20years knowledge in that field.">
<meta name="keywords" content="construction, building, contraction, contractor, builder, construction companies, remodeling,">
<meta name="author" content="greentee">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
<title>FinalConstructions | Watch the Final Construction</title>
</head>
<body>
<header class="headerWrapper">
<div id="flex1">
<h1 id="title"><span class="gold">Final</span>
Constructions | Withstand the Finals </h1>
</div>
<div id="flex2">
<nav class="topNav">
<ul>
<li><a id="li1" href="../code/index.html">Home</a></li>
<li><a id="li2" href="../code/services.html">Services</a></li>
<li><a id="li3" href="../code/about.html">About</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
<!-- end snippet -->
[1]: https://i.stack.imgur.com/Nn6Gr.png
You can make use of the `align-items: center` but first you need to set `flex` or `grid` to the container. I would suggest you to use a framework like [Bulma](https://bulma.io/documentation/components/navbar/) for your needs. It is just one of many: [Awesome CSS Frameworks](https://github.com/troxler/awesome-css-frameworks)
**Added CSS:**
.headerWrapper div#flex2 {
display: grid;
align-items: center;
}
**Output:**
[![enter image description here][1]][1]
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
body {
font-family: "Times New Roman", Times, serif;
font-style: normal;
font-size: 20px;
padding: 0px;
margin: 0px;
background-color: lightslategrey;
}
.gold {
color: gold;
}
.headerWrapper {
display: flex;
background-color: darkgrey;
min-height: 20px;
max-height: 100px;
}
.headerWrapper div#flex1 {
flex: 0 0 70%;
min-height: inherit;
max-height: inherit;
}
.headerWrapper div#flex2 {
flex: 1;
background-color: blue;
min-height: inherit;
max-height: inherit;
display: grid;
align-items: center;
}
.headerWrapper nav {
background-color: lightblue;
}
.headerWrapper ul {}
.headerWrapper li {
display: inline;
list-style: none;
}
.headerWrapper a#li1,
a#li2,
a#li3 {
text-decoration: none;
text-transform: uppercase;
color: gold;
background-color: slategray;
font-size: 20px;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Efficient construction with 20years knowledge in that field.">
<meta name="keywords" content="construction, building, contraction, contractor, builder, construction companies, remodeling,">
<meta name="author" content="greentee">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/stylesheet.css" />
<title>FinalConstructions | Watch the Final Construction</title>
</head>
<body>
<header class="headerWrapper">
<div id="flex1">
<h1 id="title"><span class="gold">Final</span>Constructions | Withstand the Finals </h1>
</div>
<div id="flex2">
<nav class="topNav">
<ul>
<li><a id="li1" href="../code/index.html">Home</a></li>
<li><a id="li2" href="../code/services.html">Services</a></li>
<li><a id="li3" href="../code/about.html">About</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
<!-- end snippet -->
[1]: https://i.stack.imgur.com/IaULX.png
