I have a situation where I am using a StyledHead section to display 10 images from an API. The images are wrapped in another section called StyledHeader, which also contains an h1 element. How can I center the h1 element both vertically and horizontally so that it appears centered over the images?
Styling:
const StyledHeader = styled.header`
width: 60%;
max-width: 1200px;
margin: auto;
`;
const StyledHead = styled.section`
display: grid;
grid-template-columns: repeat(5, auto);
gap: 5px;
grid-template-rows: 1fr;
width: 100%;
opacity: 0.7;
img {
height: 100%;
width: 100%;
}
`;
The code:
<StyledHeader>
<h1>Page Title</h1>
{loading ? <p>Loading...</p> : null}
<StyledHead>
{data.Search?.length > 0
? data.Search.slice(0, 10).map((items) => (
<img key={uuid()} alt="movie poster" src={items.Poster} />
))
: null}
</StyledHead>
</StyledHeader>