如何居中对齐水平菜单？

前提很简单，基本上只涉及一个无宽度的浮动包装，该浮动包装浮动到左侧，然后从屏幕上移到左侧的宽度位置。左：-50％。接下来，将嵌套的内部元素反转，并应用+50％的相对位置。这样可以将元素固定在中心位置。相对定位可保持流量，并允许其他内容在下方流动。

#buttons{    float:right;    position:relative;    left:-50%;    text-align:left;}#buttons ul{    list-style:none;    position:relative;    left:50%;}#buttons li{float:left;position:relative;}#buttons a{    text-decoration:none;    margin:10px;    background:red;    float:left;    border:2px outset blue;    color:#fff;    padding:2px 5px;    text-align:center;    white-space:nowrap;}#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}#content{overflow:hidden}<div id="buttons">    <ul>        <li><a href="#">Button 1</a></li>        <li><a href="#">Button 2's a bit longer</a></li>        <li><a href="#">Butt 3</a></li>        <li><a href="#">Button 4</a></li>    </ul></div>