I have a div that is in the shape of a square box and I want it to be centered. No matter how much text is inside, I would like it to remain in the middle. I am using JQuery to create my square box and would like to center it using CSS. Here is my code:
<div class="project-item" style="background-color:orange;">
<div class="darkShade">
<p>project.TextContent</p>
</div>
</div>
CSS
.project-item {
width: 33%;
background-size: cover;
color: #FFF;
position: relative;
.darkShade {
padding: 2em;
}
p {
opacity: 0;
transition: 0.2s all;
}
form {
display: flex;
flex-direction: column;
position:relative;
div {
display: flex;
flex-direction: row;
width: 100%;
}
}
}
.project-item:hover {
p {
opacity:1;
}
}
JQuery
var cw = $('.project-item').width();
$('.project-item').css({
'height': cw + 'px'
});
https://jsfiddle.net/su3h76am/4/
Thank you for your help. Sincerely, Max