#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
<div id="center">
<form action="" >
<div style="width: 100%;height: 30%;">
<input value="xxxxxx"/>
</div>
<br/><br/><br/>
<div id="logo">
<img alt="LOGO" src="</xxxx/xxx.jpg">
</div>
</form>
</div>
以上可以实现整个div 中的内容居中。但是,只是水平居中。如果我们需要的是一个登陆系统的首页面,需要整个div水平并且垂直居中怎么办?
2.CSS控制水平且垂直居中。
<style type="text/css">
body {TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
position: absolute;
width:1003px;
height:613px;
left:50%;
top:50%;
margin-left:-500px;
margin-top:-240px;
}
</style>
例子还是上面的例子,只是CSS变化了一点。可以相应调整margin-left和margin-top的大小实现完美居中。