Wie wird ein Cluster von Bildern in CSS zentriert?

Question

Also, ich habe eine Gruppe von Bildern in einem Kreis angeordnet, und ich versuche, sie an einem Ort zu bleiben, unabhängig davon, wie der Bildschirm in der Größe geändert wird. Die Bilder sind eine Reihe von Blütenblättern, die wie eine Blume angeordnet sind, und zu Beginn ließ ich jedes Blütenblatt unter Verwendung einer absoluten Positionierung und Pixeln von den Rändern entfernt platzieren. Wenn ich jedoch die Größe des Bildes ändere, würden sich die Blütenblätter alle nach links oder rechts bewegen. Dann legte ich die Blütenblätter in Prozent von den Rändern entfernt. Jetzt bewegt sich jedes einzelne Blütenblatt vom Zentrum weg oder zum Zentrum hin. Ich habe versucht, ein Div erstellen, um das Bild als Ganzes gruppiert und positioniert zu halten, aber ich hatte kein Glück damit. Irgendwelche Ratschläge, wie ich die Blütenblätter an Ort und Stelle halten kann? Hier ist, was das Blatt Code wie folgt aussieht:

basics { 
position: absolute; 
left: 47.5%; 
right: 52.5%; 
} 

gibt es zwölf Blütenblätter, die jeweils mit einer etwas anderen Position. Weiß jemand, wie ich sie an einem Ort auf dem Bildschirm halten kann?

Answer 1

Der einfache Ausweg wäre, einen Block mit einer absoluten Position zu erstellen und die Bilder mit ihrer eigenen absoluten Positionierung zu positionieren. Dies würde die Bilder zwingen, ihre aktuelle Position auf dem Block selbst zu basieren.

Macht das Sinn?

Hier ist das HTML und CSS:

Hier ist eine Geige: https://jsfiddle.net/g90gbdrp/1/

div { 
 
    border: 3px solid #000000; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: absolute; 
 
    left: calc(50% - 100px); 
 
    top: calc(50% - 100px); 
 
    } 
 
    
 
    img { 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    } 
 
    
 
    #one { 
 
    top: -2em; 
 
    left: -2em; 
 
    } 
 
    
 
    #two { 
 
    top: -2em; 
 
    right: -2em; 
 
    } 
 
    
 
    #three { 
 
    bottom: -2em; 
 
    left: -2em; 
 
    } 
 
    
 
    #four { 
 
    bottom: -2em; 
 
    right: -2em; 
 
    }

<div> 
 
    <img src="http://pngimg.com/upload/cat_PNG1631.png" id="one" /> 
 
    <img src="http://pngimg.com/upload/cat_PNG1631.png" id="two" /> 
 
    <img src="http://pngimg.com/upload/cat_PNG1631.png" id="three" /> 
 
    <img src="http://pngimg.com/upload/cat_PNG1631.png" id="four" /> 
 
</div>