div实现水平和垂直都居中的三个超实用的方法

最新推荐文章于 2024-03-21 14:40:47 发布

weixin_30823001

最新推荐文章于 2024-03-21 14:40:47 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhilingege/p/7061006.html

本文介绍了三种CSS居中布局的方法：使用transform属性、通过margin负值调整及利用margin:auto配合绝对定位。每种方法都有其优缺点，适用于不同的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文仅仅介绍作者认为的三种不错的方式，

方式一：transform: translate(-50%,-50%)

示例代码如下：

.div{ 
  position: absolute;  
  top: 50%; 
  left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
       -ms-transform: translate(-50%,-50%);  
              transform: translate(-50%,-50%);  
  background-color: red;
}

主要利用css3的： transform: translate(-50%,-50%)

优点：灵活，无需知道该div的高宽。

缺点：是CSS3新特性，所以兼容性会有问题。不兼容 ie8- （ 必须带上浏览器厂商的前缀才能兼容到ie9+）

方式二：margin-left和margin-top设为其高宽的一半的负值

示例代码如下：

div{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

优点：基本无任何兼容性问题

缺点：有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

方式三：margin:auto实现绝对定位元素的居中

示例代码如下：

.div{ 
　　 width: 600px; 
　　 height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

代码两个关键点：

上下左右均0位置定位；
margin: auto

上面代码的width: 600px height: 400px仅是示意，你修改为其他尺寸，或者不设置尺寸（需要是图片这种自身包含尺寸的元素），都是居中显示的。

宽高如果任意一个没有设置，则默认就是100%，即：“上下左右多个等于0”的结果，

如果不设置父级，则默认是相对于body居中，即居中显示于整个页面；

优点：①基本无任何兼容性问题，

　　　 ②像图片这种自身包含尺寸的元素，可以不设置高宽吧？（待确认）

缺点：①大多数时候仍然需要知道高宽，当元素高度可能变化的时候，就会比较麻烦，

　　　 ②父级也需要有明确的高宽，才能相对父级居中定位，

方式三中，可能有人会问，为何margin: auto;会让绝对定位元素居中了呢？原因如下：（参考张鑫旭大大的文章：原地址）

转载于:https://www.cnblogs.com/zhilingege/p/7061006.html