DIV根据内容宽度、高度自适应,垂直水平居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<metaname="author"content="Chomo"/>

<title>根据内容宽度、高度自适应,垂直水平居中,内容高度超过窗体时,垂直居顶</title>

<styletype="text/css">

html{height:100%;}

body{height:100%;text-align:center;}

.centerDiv{

display:inline-block;

zoom:1;

*display:inline;

vertical-align:middle;

text-align:left;

width:200px;

padding:10px;

border:1pxsolid#f60;

background:#fc0;}

.hiddenDiv{

height:100%;

overflow:hidden;

display:inline-block;

width:1px;

margin-left:-1px;

zoom:1;

*display:inline;

*margin-top:-1px;

margin-top:0;

vertical-align:middle;

background-color:#CC6699;}

</style>

</head>

<body>

<divclass="centerDiv">

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

蓝色理想<br/>

</div><divclass="hiddenDiv"></div>

<divstyle=""></div>

</body>

</html>

相关推荐