让DIV在页面中水平居中，垂直居中（非浮动状态）

HTML:

<div style="width:100px;height:100px;border:1px solid red"></div>

CSS:

方法一

div{
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

方法二：

div{
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -50px;
          margin-top: -50px;
          
        }