Ergebnis

[Rolf b]

Sehr schön :)

Die Zentrierung erreichst Du, indem Du das footer::after mit

left: calc(50% - 6.5em)

platzierst (Leerstellen um das Minuszeichen sind relevant!). Das funktioniert deshalb, weil das Quadrat erst platziert (mit linkem Rand auf 50% - halbe Breite) und dann um seinen Mittelpunkt gedreht wird.

Wenn Du jetzt auch noch die beiden Striche erzeugen willst, wird die Sache spannend, weil du genau zwei Schuss hast: ::before und ::after. Zweimal ::before oder zweimal ::after funktioniert nicht an einem Element. Eine Idee könnte sein, die Raute als ::after der .team Section zu setzen und über bottom zu positionieren. z-index:1 muss sein weil es sonst hinter dem Footer verschwindet. Interessant für Dich könnte auch sein, als Maß für die Positionierung em zu verwenden, dann ist der Zusammenhang zwischen Größe und Position deutlicher.

section.team::after {
    content: " "; z-index: 1;
    width: 13em; height: 13em;
    background-color: #efefef;
    transform: rotate(45deg);
    position: absolute;
    bottom: -6em; left: calc(50% - 6.5em);
    border-radius: 1em;
}

Gruß Rolf