How do I center the twitter bootstrap tabs on the page?

Simply adding

margin-left:50%;

when I set up my tabs, worked for me.

For e.g.

<ul class="nav nav-tabs" style="margin-left:50%; margin-right:50%;">

Adding the class nav-justified works for me. This not only center aligns the tabs but it also spreads them nicely at the top.

<ul class="nav nav-tabs nav-justified">
    <li><a href="#Page1">Page1</a></li>
    <li><a href="#Page2">Page2</a></li>
    <li><a href="#Page3">Page3</a></li>
    <li><a href="#Page4">Page4</a></li>
  </ul>

Even though the accepted answer works well, I found the above more natural to Bootstrap.

Accepted answer is perfect. It can be further customized so that you can use it side by side with the standard left aligned tabs.

.nav-tabs.centered > li, .nav-pills.centered > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs.centered, .nav-pills.centered {
    text-align:center;
}

To use it, add "centered" class to your tabs element

<ul class="nav nav-tabs centered" >
..
</ul>

nav-tabs list items are automatically floated to the left by the bootstrap so you have to reset that and instead display them as inline-block, and to center menu items we have to add the attribute of text-align:center to the container, like so:

CSS

.nav-tabs > li, .nav-pills > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
     zoom:1; /* hasLayout ie7 trigger */
}

.nav-tabs, .nav-pills {
    text-align:center;
}

Demo: http://jsfiddle.net/U8HGz/2/show/ Edit here: http://jsfiddle.net/U8HGz/2/

---

Edit: patched version that works in IE7+ provided by user @My Head Hurts down in the comments below.

Demo: http://jsfiddle.net/U8HGz/3/show/ Edit here: http://jsfiddle.net/U8HGz/3/