.nav{ 宽度：100%； 高度：100%； 位置：固定； 背景颜色：白色； 溢出：隐藏； } .菜单a{ 内边距：30px； 颜色：黑色; 文本对齐：居中； 左：0； 保证金：0 自动； 弹性：无； 显示：柔性； 对齐项目：居中； 调整内容：居中； }</pre> <pre class="brush:html;toolbar:false;"><nav class="nav">
你必须将flexbox属性应用于包含项目的容器，而不是项目本身。
.nav { width: 100%; height: 100%; position: fixed; background-color: white; display: flex; align-items: center; justify-content: center; } .menu { list-style-type: none; padding: 0; } .menu a { padding: 30px; color: black; text-align: center; text-decoration: none; }
<nav class="nav"> <ul class="menu"> <li><a href="#">Google Store</a></li> <li><a href="#">Google Search</a> </li> <li><a href="#">Spotify</a></li> <li><a href="#">Spotify Blog</a></li> <li><a href="#">Squarespace</a></li> <li><a href="#">Other work</a></li> </ul> </nav>
这样可以使你的ul在.nav容器中水平和垂直居中。
你必须将flexbox属性应用于包含项目的容器，而不是项目本身。
.nav { width: 100%; height: 100%; position: fixed; background-color: white; display: flex; align-items: center; justify-content: center; } .menu { list-style-type: none; padding: 0; } .menu a { padding: 30px; color: black; text-align: center; text-decoration: none; }<nav class="nav"> <ul class="menu"> <li><a href="#">Google Store</a></li> <li><a href="#">Google Search</a> </li> <li><a href="#">Spotify</a></li> <li><a href="#">Spotify Blog</a></li> <li><a href="#">Squarespace</a></li> <li><a href="#">Other work</a></li> </ul> </nav>这样可以使你的ul在.nav容器中水平和垂直居中。