Is there a way to center an icon on a page within a responsive grid layout with multiple items? I have tried using absolute positioning for the icon but it seems to be taking into account the entire screen's range of motion instead of just staying within the boundaries of the grid like the other photos.
.icon--art {
width: 200px;
}
.icon--wavy-edges-circle {
filter: drop-shadow(0 0 0 #f3ede9);
opacity: 0.95;
position: absolute;
left: 50%;
right: 50%;
transform: translate(-50%, 50%);
}<section class="container art__block">
<article class="grid grid--1×2">
<div class="art__content"> somethings... </div>
<div class="art__gallery grid grid--2×2">
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<img src="..." alt="..." />
<div>
<svg class="icon--art icon--wavy-edges-circle">
<use href="images/sprite.svg#wavyEdgesCircle"></use>
</svg>
<span class="art__img-text">TASTES SO GOOD!</span>
</div>
</div>
</article>
</section>