首页如何让无序列表垂直居中显示？

如何让无序列表垂直居中显示？

时间: 2024-10-21 16:09:24 浏览: 38

要让无序列表垂直居中显示，你可以结合Flexbox和Grid布局。如果你希望基于容器的尺寸进行居中，以下是使用Flexbox的方法： ```html <!DOCTYPE html> <html> <head> <style> .container { display: flex; /* 使用Flexbox */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 设置容器高度，这里假设为视口高度 */ } ul.vertical-menu { list-style-type: none; display: flex; /* 同样应用Flexbox */ flex-direction: column; /* 将列变成行，以便于垂直居中 */ gap: 10px; /* 项目间间距 */ } ul.vertical-menu li { flex: 0 0 auto; /* 确保每一项都占据固定高度 */ } </style> </head> <body> <div class="container"> <ul class="vertical-menu"> <li>菜单项1</li> <li>菜单项2</li>  </ul> </div> </body> </html> ``` 在这里，`.container`的`align-items: center`使得其内容（包括`ul`）垂直居中。如果你想要使用CSS Grid布局，也可以尝试类似的方式，将容器设置为grid，并对行和列应用相应的对齐策略： ```css .container { display: grid; place-items: center; /* 垂直和水平居中 */ height: 100vh; } ```

阅读全文