This centered navigation bar places menu items in the center, ideal for modern marketing websites and portfolios.
HTML
<nav class="ss-nav center-nav">
<a href="#">Home</a>
<a href="#">Work</a>
<a href="#">Contact</a>
</nav>CSS
.center-nav{
display:flex;
justify-content:center;
align-items:center;
gap:16px;
padding:12px 16px;
max-width:420px;
margin:auto;
border-radius:14px;
background:var(--nav-bg);
border:1px solid var(--nav-border);
}
.center-nav a{
text-decoration:none;
font-size:13px;
padding:6px 10px;
border-radius:8px;
color:var(--nav-text);
transition:background .2s ease;
}
.center-nav a:hover{
background:var(--nav-hover-bg);
}
:root{
--nav-bg:#f1f5f9;
--nav-border:#e5e7eb;
--nav-text:#0f172a;
--nav-hover-bg:#e2e8f0;
}
@media (prefers-color-scheme: dark){
:root{
--nav-bg:#020617;
--nav-border:#1f2937;
--nav-text:#e5e7eb;
--nav-hover-bg:#1f2937;
}
}
Notes
- Center-aligned menu
- Clean aesthetic
- Minimal distraction
- Portfolio-friendly
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.