I am facing an issue with my carousel where I am trying to display text at the center of it both horizontally and vertically. I attempted to use the flex display property but did not achieve the desired outcome.
.heroText {
display: flex;
position: absolute;
align-items: center; // to vertically center the element
justify-content: center; // to horizontally center the element
z-index: 999 !important; // to ensure text is displayed above carousel
}
<div class="heroText">
<p>farmers</p>
</div>