イメージのクラスタをCSSの中央に揃える方法は？

Question

このように、画像のグループを円で配置していますが、画面のサイズの変更方法に関係なく、それらを1か所に配置しようとしています。画像は、花のように配置された一連の花びらであり、最初に、絶対位置付けと縁から離れたピクセルを使用して各花弁を配置しました。しかし、画像のサイズを変更すると、花びらはすべて左または右に移動します。 次に、縁からパーセンテージを使って花びらを置きました。それぞれの花びらは、中央から中央に向かって移動します。 私はdivを作成して画像全体をクラスタ化して配置するようにしましたが、それには何の不運もありませんでした。 私は花びらをどのように保つことができるかアドバイスしますか？ はここ花びらのコードは次のようになります。

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

12枚の花びら、わずかに異なる位置にそれぞれがあります。誰も私がスクリーン上の1か所にそれらを保持する方法を知っていますか？

Answer 1

簡単な方法は、絶対位置のブロックを作成し、絶対位置を指定して画像を内側に配置することです。これにより、画像はブロック自体の現在の位置に基づいて強制されます。

それは意味がありますか？あなたはjsfiddleを投稿することができ 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>