在页面中居中一个div

如何在一个页面中居中一个div？

方法一：

　<div

        style="width:100px;

        height:100px;

        background:red;

        position: absolute;

        top:50%;

        left:50%;

        margin:-50px 00 -50px;">

    </div>

 

方法二：

　<div

        style="width:100px;

        height:100px;

        background:red;

        position: absolute;

        top:50%;

        left:50%;

        transform: translate(-50%,-50%);">

    </div>