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

最新推荐文章于 2022-11-22 23:35:20 发布

zhbitxhd

最新推荐文章于 2022-11-22 23:35:20 发布

阅读量2k

点赞数

分类专栏： DIV+CSS

本文链接：https://blog.csdn.net/zhbitxhd/article/details/11109121

版权

1 篇文章 0 订阅

订阅专栏

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>
   <br/><br/><br/>
   <div id="logo">
          <img alt="LOGO" src="</xxxx/xxx.jpg">
   </div>
</form>
</div>

以上可以实现整个div 中的内容居中。但是，只是水平居中。如果我们需要的是一个登陆系统的首页面，需要整个div水平并且垂直居中怎么办？

2.CSS控制水平且垂直居中。

例子还是上面的例子，只是CSS变化了一点。可以相应调整margin-left和margin-top的大小实现完美居中。

关注

专栏目录