如何水平和垂直居中導航欄？

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; 
}