Vertically align text overlaying image while maintaining overflow-wrap break-word - css

Question

I have a few styled components - a container, an image and a div for text to overlay the image. Currently, I have the text centered and vertically aligned with the image, but because I added display: flex; with justify-content: center; and align-items: center; longer words no longer break within the div. How can I accomplish this with or without flexbox?
What it properly looks like positioned without the need to break words:
company 1 no breaking, no need
Unexpected Behavior / What it looks like with the need to break words:
company 2 still no breaking
Styled Components:
const ProfilePicContainer = styled.div`
position: relative;
display: inline-block;
text-align: center;
color: #fff;
`
const ProfilePicText = styled.div`
position: absolute;
height: 80px;
width: 90px;
top: -25%;
left: 35%;
min-width: 90px;
font-size: clamp(1.15em, 3vw, 1em);
line-height: 100%;
overflow-wrap: break-word!important;
word-wrap: break-all!important;
display: inline-block;
vertical-align: middle;
& div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-wrap: break-word!important;
word-wrap: break-all!important;
display: flex;
justify-content: center;
align-items: center;
}
`
const CompanyProfilePic = styled.img.attrs({ src: `${imgBlank}` })`
position: relative;
left: 30px;
top: -30px;
margin-bottom: -10px;
#media (max-width: 767px) {
width: auto;
};
`
JSX:
export default function Intro({ company, isExpanded, mainWidth }) {
return (
<Wrapper>
<Banner>
<BannerImg background={company.banner} />
<ProfilePicContainer>
<CompanyProfilePic />
<ProfilePicText><div>{company.name}</div></ProfilePicText>
</ProfilePicContainer>
</Banner>
...
</Wrapper>
)
}