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

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的大小实现完美居中。



你可能感兴趣的:(CSS控制DIV水平并且垂直居中)