Untitled

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="teste.css">
</head>

<body>

<div class="centro">

    <div class="conteudo" id="um"></div>
    <div class="conteudo" id="dois"></div>
    <div class="conteudo" id="tres"></div>
    <div class="conteudo" id="quatro"></div>
    <div class="conteudo" id="cinco"></div>
    <div class="conteudo" id="seis"></div>
    <div class="conteudo" id="sete"></div>
    <div class="conteudo" id="oito"></div>

</div>

</body>
</html>

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.centro {
    width: 80%;
    height: 50%;
    border: 2px solid #808080;
    transform: translate(10%,50%);
    padding: 5px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.conteudo {
    width: 230px;
    height: 230px;
    border: 5px dashed #808080;
}