首页 > 代码库 > div居中效果出现的问题和解决方法

div居中效果出现的问题和解决方法

2024-08-21 03:15:01   222人阅读

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
  
        
        div {
            width: 500px;
            height: 300px;
            margin: -150px 0px 0px -250px;
            top: 50%;
            left: 50%;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div></div>
   
</body>

</html>

前面正确的编写方式

 

第一种样式是由于设置了相对定位引起的失效;

 

 

第二种情况:浏览窗口放大导致视觉失效

技术分享

div居中效果出现的问题和解决方法


联系
我们