让div在页面中居中的两种方法

275 阅读1分钟
<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
    <style>
        /* div{
            width: 100px;
            height: 100px;
            border-radius: 25px;
            background-color: #0f0;
            position: absolute;
            margin: auto;
            top: 0;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        } 使用绝对定位使div在页面居中*/
        div{
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: #0f06;
            border-radius: 25px;
        }/*拉回方式*/
    </style>
 </head>
 <body  style="background: paleturquoise;">
    <div></div>
</body>
</html>