How do I center of this whole div class? Same with hovering - html

Question

I was trying to center these div class using margin but when Im looking at the mobile view, its overlapping. I wanted to do to make it responsive by itself
.hover-buttons {
transition: 0.25s;
opacity: 0;
position: absolute;
left: 28%;
bottom: calc(-10%);
padding: 10px 20px 15px 20px;
}
.item:hover .hover-buttons {
opacity: 1;
transition: 0.25s;
cursor: pointer;
padding: 10px 20px 15px 20px;
text-align: center;
background-color: #fff;
color: #242424;
left: 26%;
bottom: calc(15%);
}
.hover-buttons a {
text-decoration: none;
color: #242424;
transition: 0.25s;
}
.hover-buttons a:hover {
color: #808080;
transition: 0.25s;
}
<div class="hover-buttons">
<a class="" href="#"><i class="fa-solid fa-cart-shopping fa-fw"></i></a>
<a class="" href="#"><i class="fa-solid fa-magnifying-glass fa-fw"></i></a>
<a class="" href="#"><i class="fa-solid fa-shuffle fa-fw"></i></a>
<a class="" href="#"><i class="fa-regular fa-heart"></i></a>
</div>

Answer 1

First of all, not so sure why are you using: .item:hover .hover-buttons, probably in other parts of your code
besides that, you can center that div by itself with the following:
add a width: 100%
display the container as flex
justify the inner content as center
Also, I reset the default margin and padding from the browser to 0.
Check out the snippet. Hopefully it will help:
html,
body {
padding: 0;
margin: 0;
}
.hover-buttons {
transition: 0.25s;
position: absolute;
bottom: calc(10%);
width: 100%;
display: flex;
justify-content: center;
}
.hover-buttons a {
text-decoration: none;
color: #242424;
transition: 0.25s;
}
.hover-buttons a:hover {
color: #808080;
transition: 0.25s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<div class="hover-buttons">
<a class="" href="#">
<i class="fa-solid fa-cart-shopping"></i>
</a>
<a class="" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
<a class="" href="#">
<i class="fa-solid fa-shuffle"></i>
</a>
<a class="" href="#">
<i class="fa-solid fa-heart"></i>
</a>
</div>