html中区域正中央,如何居中Div中内容区域

DEMO ，一目了然。代码如下：

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);

HTML

adfasfdasf

adfasfdasf

adfasfdasf

adfasfdasf

adfasfdasf

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;

}