居中的几种方式

最新推荐文章于 2023-09-30 13:11:25 发布

ningyiyang666

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/ningyiyang666/article/details/113747923

版权

本文详细介绍了几种使用CSS实现元素居中的方法，包括绝对定位配合margin负值、line-height与text-align结合以及transform translate属性。每种方法都有其适用场景和优缺点，如绝对定位适用于已知宽高的元素，line-height适合行内元素，而transform方法则能在未知宽高时保持元素居中，但需要注意浏览器兼容性问题。

摘要由CSDN通过智能技术生成

一、

     .div1{
            position: absolute;
            width: 100px;
            height: 100px;
            background: blue;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

在这里插入图片描述脱离文档流，用绝对定位实现，优点是所有浏览器都支持，缺点是div元素相对于父级元素的宽高必须有固定值。

如果不想计算值，就写一个自适应值让计算机自己计算

 .div2{
            position: absolute;
            
            background: blue;
            margin: auto;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
           
            width: 90px;
            height: 90px;
        }

在这里插入图片描述二、
.jz{ line-height: 100px; height: 100px; text-align: center; }

在这里插入图片描述
优点：简单
缺点：这种方法只适用于行内元素

三、
在这里插入图片描述这是两个属性，这两个属性很强大，无论是行内元素还是块级元素，只要父元素dsplay设置了-webkit-box属性，后面两个属性分别设置居中。
优点：适用于行内元素和块级元素
缺点，部分浏览器不支持

 .jz1{
            
        padding:10px;
        background:green;
        color:#fff;
        position:absolute;
        top:50%;
        left:50%;   
        transform: translate(-50%,-50%);
 
}

在这里插入图片描述