I have a div witch is a square box and I want it to me in the middle, the more textyou put in it will still be in the middle, I am making my box square with JQuery and would like to center it with 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/

Thanks in advance Best regards Max