如何水平和垂直居中导航栏？

Question

我想将导航栏直接放在页面中间。因此，当我向下滚动时，我的其余内容会从下方出现。有人可以帮忙并解释如何将我的背景图像定位到固定位置，以便我滚动背景不会移动并失去其分辨率质量。

.menu-wrap {
  width: 750px;
  margin: 0 auto;
  list-style: none;
}
/* DROPDOWN */

.ulMenu {
  padding: 0;
  margin: 0;
}
.navMenu ul {
  padding: 0;
  margin: 0;
  line-height: 30px;
}
navMenu {
  padding: 0;
  margin: 0;
}
.navMenu li {
  list-style-type: none;
  padding: 0;
  margin: 0;
  float: left;
  position: relative;
}
.navMenu ul li a {
  text-align: center;
  padding: 10px;
  width: 150px;
  height: 30px;
  display: block;
  color: white;
  background-color: rgba(233, 233, 233, 0.5);
  text-decoration: none;
  border-radius: 0px;
  font-family: 'Raleway', sans-serif;
  font-size: 20px;
}
.navMenu ul ul {
  position: absolute;
  visibility: hidden;
}
.navMenu ul li:hover ul {
  visibility: visible;
}
.ulMenu .arrow {
  font-size: 10px;
}
.navMenu ul li:hover ul li a:hover {
  background-color: rgba(93, 93, 93, 0.5);
}
.navMenu li:hover {
  background-color: none;
}
.navMenu a:hover {
  color: blue;
}
.navMenu ul li ul li {
  padding: 2px 0 0 0;
}
.navMenu ul li {
  padding: 0 2px 0 0;
}
/* DROPDOWN ENDED */

html {
  background-image: url("indexImg.jpg");
  background-size: cover;
}

<div class="menu-wrap">

  <nav class="navMenu">

    <ul class="ulMenu">

      <li><a href="index.html">Home</a>
      </li>

      <li>

        <a href="products.html">Products<span class="arrow">&#9660;</span></a> 

        <ul>
          <li><a href="#">#</a>
          </li>
          <li><a href="#">#</a>
          </li>
        </ul>

      </li>

      <li><a href="contact.html">Contact Us</a>
      </li>
      <li><a href="aboutUs.html">About </a>
      </li>

    </ul>

  </nav>

</div>

Answer 1

 .menu-wrap {
     position: relative;
 }
 .navMenu {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

Answer 2

我希望这是你需要的

检查它是否可以完成您的代码

HTML

<nav>
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Product</a>
  <ul>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
    <li><a href="#">item</a></li>
  </ul>
</li>
<li><a href="#">Contact us</a>
<li><a href="#">About</a></li>          

CSS

nav {    
display: block;
text-align: center;
}
nav ul {
margin: 0;
padding:0;
list-style: none;
}
.nav a {
display:block; 
background: #111; 
color: #fff; 
text-decoration: none;
padding: 0.8em 1.8em;
text-transform: uppercase;
font-size: 80%;
letter-spacing: 2px;
text-shadow: 0 -1px 0 #000;
position: relative;
}
.nav{  
vertical-align: top; 
display: inline-block;
box-shadow: 
1px -1px -1px 1px #000, 
-1px 1px -1px 1px #fff, 
0 0 6px 3px #fff;
border-radius:6px;
}
.nav li {
position: relative;
}
.nav > li { 
float: left; 
border-bottom: 4px #aaa solid; 
margin-right: 1px; 
}  
.nav > li > a { 
margin-bottom: 1px;
box-shadow: inset 0 2em .33em -0.5em #555; 
}
.nav > li:hover, 
.nav > li:hover > a { 
border-bottom-color: orange;
}
.nav li:hover > a { 
color:orange; 
}
.nav > li:first-child { 
border-radius: 4px 0 0 4px;
} 
.nav > li:first-child > a { 
border-radius: 4px 0 0 0;
}
.nav > li:last-child { 
border-radius: 0 0 4px 0; 
margin-right: 0;
} 
.nav > li:last-child > a { 
border-radius: 0 4px 0 0;
}
.nav li li a { 
 margin-top: 1px;
 }
.nav li a:first-child:nth-last-child(2):before { 
content: ""; 
position: absolute; 
height: 0; 
width: 0; 
border: 5px solid transparent; 
top: 50% ;
right:5px;  
}
.nav ul {
position: absolute;
white-space: nowrap;
border-bottom: 5px solid  orange;
z-index: 1;
left: -99999em;
}
.nav > li:hover > ul {
left: auto;
margin-top: 5px;
min-width: 100%;
}
.nav > li li:hover > ul { 
left: 100%;
margin-left: 1px;
top: -1px;
}
/* arrow hover styling */
.nav > li > a:first-child:nth-last-child(2):before { 
border-top-color: #aaa; 
}
.nav > li:hover > a:first-child:nth-last-child(2):before {
 border: 5px solid transparent; 
 border-bottom-color: orange; 
margin-top:-5px
}
.nav li li > a:first-child:nth-last-child(2):before {  
 border-left-color: #aaa; 
margin-top: -5px
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
border: 5px solid transparent; 
border-right-color: orange;
 right: 10px; 
}