Create a centred horizontal navigation – CSS Wizardry

29 January, 2011

Written by Harry Roberts on CSS Wizardry.

Since originally penning this article in 2011, I have
fully transitioned myself away from CSS and heavily into web performance consultancy. You can hire me for that now!

This article was originally written in 2011 and used text-alignment and
display: inline; to manipulate lists as text-level, inline elements. However,
in 2025, I completely rewrote it to utilise Flexbox: the much more suitable
approach for the times.

It massively simplified the amount of CSS needed to build a horizontally centred
nav, so while this post may now seem a little underwhelming, it does serve as
a great example of just how powerful CSS has gotten in the last decade.

Pretty standard, an unordered list of menu items. The CSS is where it’s at:

.c-nav {
  border: 1px solid #ccc;
  border-width: 1px 0;
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  justify-content: center;
  gap: 10px;
}

  .c-nav__item { }

    .c-nav__link {
      display: block;
    }

The workhorses here are simply display: flex; and justify-content: center;.
This creates a Flex context and forces items to pack from the centre outward.

gap optionally spaces the items by 10px, which creates an un-clickable
‘dead’ zone between each link. Whether you want this or not is entirely up to
you, so feel free to modify or exclude to suit your needs.

Here’s a quick demo! It works in all major current
browsers.