让一个div居于页面中间，水平居中同时垂直居中

来源：互联网发布：南方全站仪取数据编辑：程序博客网时间：2024/06/10 19:46

两种方式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>div居于页面正中间</title>    <style type="text/css">        *{            margin: 0;            padding: 0;            background-color: #EAEAEA;        }        div{            width: 200px;            height: 200px;            background-color: #1E90FF;        }

         //1.如果已知高宽的情况下，单纯的只是距中

         .center-in-center{          position: absolute;          left: 50%;          top:50%;          margin-left: -100px;(width/2)          margin-top: -100px; (height/2)         }

         //2.div的左顶点刚好在页面的中心点处。现在的思路是，移动div然后让div的中心和页面中心重合

       .center-in-center{             position: absolute;             top: 50%;             left: 50%;           -webkit-transform: translate(-50%, -50%);            -moz-transform: translate(-50%, -50%);            -ms-transform: translate(-50%, -50%);            -o-transform: translate(-50%, -50%);            transform: translate(-50%, -50%);
       }
    </style></head><body>    <div class="center-in-center"></div></body></html>

阅读全文

0 0