Boa tarde poderiam me ajudar na seguinte questão: criei um fundo azul e gostaria de deixar a caixa que fiz centralizada nesse fundo, mas não estou enxergando como fazer.
<!doctype>
<html>
<head>
<link rel="stylesheet" href="bordas.css">
</head>
<div class="container">
<div class="box">
</div>
</div>
</html>.container {
width: 200px;
height: 200px;
background-color: blue;
margin: 20% 20%;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #fff;
box-shadow: 0 0 0 4px #000,
0 0 0 8px #fff,
0 0 0 12px #000,
0 0 0 16px #fff,
0 0 0 20px #000;
transform: translate(100px, 100px);
}