css 移动端弹出导航 |css label 字体居中

1. 需要给导航按钮添加点击事件，可以使用JavaScript或者jQuery实现，也可以使用CSS3的:checked伪类实现。
2. 导航按钮需要有明显的标识，例如使用图标或者文字，以方便用户的识别与操作。
3. 导航菜单需要有清晰的设计与排版，以便用户快速找到所需的内容。

下面是一份基本的CSS移动端弹出导航代码：

HTML:
<label for="menu-icon" class="menu-icon">☰</label><input type="checkbox" id="menu-icon"/><nav id="menu"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul></nav>CSS:
@media screen and (max-width: 768px) {
.menu-icon {
display: block;
position: fixed;
right: 10px;
top: 10px;
font-size: 30px;
cursor: pointer;
z-index: 999999;
}
#menu {
position: fixed;
z-index: 9999;
right: 0;
top: 0;
height: 100%;
width: 50%;
background-color: #333;
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
}
#menu ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu li {
padding: 10px;
border-bottom: 1px solid #666;
}
#menu li a {
color: #fff;
}
#menu-icon:checked ~ #menu {
transform: translateX(0%);
}
}

以上代码实现了一个简单的移动端弹出导航，可以根据实际需求自行修改。