您的位置：首页 > Web前端 > CSS

CSS控制DIV水平并且垂直居中

2013-09-05 10:00 465 查看
CSS 控制DIV层水平居中
DIV本身没有定义自己居中的属性,

对需要水平居中的DIV层添加以下属性:

margin-left: auto;
margin-right: auto;

但是，因为

L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如何使DIV居中

所以整个样式代码如下：

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

body {TEXT-ALIGN: center;}
#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的大小实现完美居中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航