一个div在另一个div里面居中要实现的效果

要实现的效果

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/static/index.css">
</head>
<body>
    <div class="container">
        container
        <div class="page">
            page
        </div>
    </div>
</body>
</html>

index.css

html, body, div{
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
}

.container {
    background-color: aliceblue;
}

.page {
    background-color: aquamarine;
    width: 60%;
    height: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}