It can be hard indeed, especially to get it working on the major browsers. The best way to make a header with a certain number of boxes centered is to embed three divs; the outer one will span the entire width of the screen, the middle one is shrinkwrapping the link/menu boxes (and is centered), and the links themselves are block elements with a fixed width. (If it's not necessary they all have the same width, it's easier to use inline elements, like a <span>.)
Now the trick is to put the block elements side by side, instead of the usual top-down. The official way is to specify "display: inline-block". Unfortunately, this won't work in Firefox or Mozilla (for a change! ). Alternatively, you can add "float: left", but this isn't ideal either. The outer div will no longer be wrapped around the floated elements, so you can't outline it anymore. (You can experiment with setting the height explicitly, but be careful not to break the layout if someone selects a bigger or smaller font). Yet another option is to use "display: table-cell". This will make your elements behave almost like an inline block. It's not elegant, but works almost everywhere.
If you are still having troubles to center block elements, there's a very dirty trick that works in most browsers. If your element is say 300 pixels wide, use "left: 50%; margin-left: -150px". You move the left edge to 50% by absolute positioning, and then move it back half of its width.
