糟糕的修复，但它确实有效…

CSS:

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML:

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>

默认情况下，div元素显示为块元素，因此它们有100%的宽度，使得居中没有意义。正如Arief所建议的，你必须指定宽度，然后你可以在指定边距时使用auto，以便将div居中。

或者，您也可以强制display: inline，但这样您就会有一些行为非常像span而不是div的东西，所以这没有多大意义。

<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

如果你不提供"overflow:hidden"为"。Product_container”，“outer-center”div将与它右边的其他附近内容重叠。任何链接或按钮的右边“外中心”不会工作。尝试“outer-center”的背景色来理解“overflow:hidden”的需求

我发现了一个有趣的解决方案，我正在制作滑块，必须将滑块控制居中，我这样做，工作很好。您也可以添加相对位置到父和移动子位置垂直。看看http://jsfiddle.net/bergb/6DvJz/

CSS:

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }  

HTML:

<div id="parent">
    <div id="child">voila</div>
</div>

这将使一个元素居中，如有序列表、无序列表或任何元素。 只需用类为outerElement的Div包装它，并给内部元素类为innerElement。

outerelement类适用于IE、旧Mozilla和大多数较新的浏览器。

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
} 

将这个CSS添加到product_container类中

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;