.square_contents { display: flex; flex-wrap: wrap; max-width: 600px; } .square_contents div { position: relative; width: 31%; background: #ffb6c1; margin: 1%; } .square_contents div::before { content: ""; display: block; padding-top: 100%; } .square_contents p { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }