DIV水平居中的几种方法

1、设置左右的margin为auto

div{
        margin: 20px auto;

      800px;
    }

此方法要有这个声明:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

并且,设置的居中元素要有一个固定的宽度;

2、相对定位与负的边距

div{        

    position:relative;
    760px;
    left:50%;
    margin-left:-380px

      }

这段代码的意思是,设置wrap的定位是相对于其父元素body标签的,然后将其左边框移动到页面的正中间(也就是left:50%含意);最后我们再从中间位置向左偏移回一半的距离来,这样就实现了水平居中了。

3、padding方法:(有待验证)

当一个对象没有设置具体宽度,可以用下面的方法来实现。这样的设计我们是使用的像元素的padding来设置的,实际中我们是改变了父元素的容器大小:

如我们希望div元素长度随窗口而改变,同时又维持居中,我们就可以这样写:

body { padding:10px 150px; }

原理是需要保持父元素左右两侧的填充是相等的。

另外,MS可以通过JS来实现,那个以后有需要再研究。

  

原文地址:https://www.cnblogs.com/ada313/p/3408578.html