div 居中显示

<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;
        }
        .center-in-center{
<!--        第一种：-->
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;

<!--             第二种-->
<!--            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>

图片显示：