Buttons not centering in box, react Mui - reactjs

Question

Im working on a image carousel in my react project, I got it all to work but im struggling to get the side buttons to center vertically. I've put the three elements in a flexbox with both alignContent:"center", and justifyContent:"center" but the buttons wont seem to move. The image however centers as normal. Please help!
I've included the full code of the component aswell as a screenshot of the slider.
import { Box, IconButton, Button } from "#mui/material";
import React, { useState } from "react";
import NavigateNextIcon from "#mui/icons-material/NavigateNext";
import NavigateBeforeIcon from "#mui/icons-material/NavigateBefore";
const slides = [
{
name: "search",
img: "https://cdn.pixabay.com/photo/2022/04/24/16/52/animal-7154059_960_720.jpg",
},
{
name: "sales",
img: "https://cdn.pixabay.com/photo/2022/06/26/12/48/animal-7285343_960_720.jpg",
},
{
name: "about",
img: "https://cdn.pixabay.com/photo/2022/07/22/19/42/marmot-7338831_960_720.jpg",
},
];
function Slider() {
const [currSlide, setCurrSlide] = useState(0);
function handleSlide(e) {
if (currSlide === slides.length - 1 && e === "next") {
setCurrSlide(0);
console.log(currSlide);
} else if (currSlide === 0 && e === "previous") {
setCurrSlide(slides.length - 1);
console.log(currSlide);
} else {
if (e === "next") {
setCurrSlide(currSlide + 1);
console.log(currSlide);
} else {
setCurrSlide(currSlide - 1);
console.log(currSlide);
}
}
}
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignContent: "center",
width: "100%",
height: "auto",
}}
>
<Button
onClick={() => handleSlide("previous")}
sx={{
color: "primary",
height: 50,
width: 50,
}}
>
<NavigateBeforeIcon fontSize="large" />
</Button>
<Box
component="img"
sx={{
height: "auto",
width: "80%",
objectFit: "contain",
}}
src={slides[currSlide]["img"]}
/>
<Button
onClick={() => handleSlide("next")}
sx={{
color: "primary",
height: 50,
width: 50,
}}
>
<NavigateNextIcon fontSize="large" />
</Button>
</Box>
);
}
export default Slider;
Slider

Answer 1

Instead of alignContent: "center" use alignItems: "center". This will align all three elements to the center.