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

<!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>

前面正确的编写方式

 

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

 

 

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

posted @ 2016-11-15 18:24  陈小华  阅读(221)  评论(0)  编辑  收藏  举报