如何居中Div中内容区域

Question

我有一个很简单问题，但我一直不能解决。我在table里设置了一个div，里面是主要展示内容。我已经用table的td标签设置了其宽度和高度为iPhone的尺寸，现在我想居中table和td里div，可以让内容在任何浏览器下都能正常居中显示，我该如何做？

Answer 1

Shibin Ragh：其实这个功能很好实现，给你看看DEMO ，一目了然。代码如下：

<div class="demo wraptocenter">
   <span></span>
   <img src="http://cms.9tech.cn/uploads/allimg/131127/1J1352353-0.png?1295473781" alt="" />
</div> 

CSS

.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

/*End wraptocenter - image Vcenter  patch styles*/    
.demo  {
         width:100px;
         height:100px;
         border:1px solid red;
         position:absolute;
         top:50%;
         left:50%;
         margin-top:-100px;
         margin-left:-100px;}

Serv：试试下面的代码：

div#centerlayout 
{ 
    position:absolute; 
    left:50%; 
    top:50%; 
    height:XXXpx; 
    width:XXXpx; 
    margin-top:-XXXpx; 
    margin-left:-XXXpx; 
} 

Aaron Tyler：如果你jQuery的page属性就可以很轻松的居中div，这个代码并未在IE里测试，但在Firefox和safari里可以执行。

var pageMargin = ($(document).width() - $("div.page").width()) / 2;
$("div.page").css("margin-left", pageMargin).css("margin-right", pageMargin);

Shailender Arora：代码如下，也可以看Demo 。

HTML

   <div class="img_thumb">
    <table>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
        <tr><td>adfasfdasf</td></tr>
    </table>
</div>

CSS

.img_thumb {
    background: none repeat scroll 0 0 red;
    display: table-cell;
    height: 200px;
    vertical-align: middle;
    width: 200px;

}
table {
    border: 1px solid;
    width: 100px;
    margin:auto;
}

原文：How to center the contents of a div