DIV根据内容宽度、高度自适应，垂直水平居中
teresalxm 2011-08-16
<!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>
相关推荐
/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，并针对不同浏览器进行兼容。-- 在外层添加一个div，把行内容居中，添加.row .justify-content-center -->
CSS中居中的几种方式1.水平居中margin：0 auto；块级元素在块级元素中居中设置在子元素上，前提是不受float影响。给它的父元素设置text-aglin：center不会使它在父元素中居中