Flex using justify-content

Question

I have the following snippet of code, where I need to align the text in the center of the box.

I should use flex if possible and try to avoid 'text-align'.

Currently I am using justify-content: center; but with no result.

Any idea how to fix it? Is it possible only using flex?

.div1
    {
    position: absolute;
    top: 7px;
    left: 103px;
    width: 631px;
    height: 590px;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    z-index: 2;
    }
    
.div2
    {
    position: inherit;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
    transform: rotateZ(5deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1) scaleZ(1) translateX(0px) translateY(0px) translateZ(0px);
    backface-visibility: visible;
    border-radius: 4px;
    border-style: solid;
    border-width: 0px;
    background-color: rgb(250, 0, 136);
    border-color: rgb(0, 0, 0); opacity: 1;
    box-shadow: rgba(200, 0, 0, 0.498039) -64px 40px 56px 0px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    }

div3
    {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgb(0, 0, 0);
    letter-spacing: 0em;
    line-height: 1;
    padding: 0px;
    align-self: flex-start;
    word-wrap: break-word;
    }

<div class="div1">
    <div class="div2">
        <div class="div3"><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>

Answer 1

<div class="wrapper">
<div>
<p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p>
</div>

       </div>

.wrapper{
      height: 590px;
    padding: 5px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fcc;
}

fiddler https://jsfiddle.net/Lbwv7wuh/1/

Answer 2

By adding display: flex; flex-direction: column; align-items: center; to your inner div will center the text horizontally

<div style="position: absolute; top: 7px; left: 103px; width: 631px; height: 590px; perspective: 1000px; perspective-origin: 50% 50%; z-index: 2;">
    <div style="position: inherit; top: 0px; left: 0px; width: inherit; height: inherit; transform: rotateZ(5deg) rotateY(0deg) rotateX(0deg) skewY(0deg) skewX(0deg) scaleX(1) scaleY(1) scaleZ(1) translateX(0px) translateY(0px) translateZ(0px); backface-visibility: visible; border-radius: 4px; border-style: solid; border-width: 0px; background-color: rgb(250, 0, 136); border-color: rgb(0, 0, 0); opacity: 1; box-shadow: rgba(200, 0, 0, 0.498039) -64px 40px 56px 0px; overflow: hidden; display: flex; justify-content: center;">
        <div style="font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 400; color: rgb(0, 0, 0); letter-spacing: 0em; line-height: 1; padding: 0px; align-self: flex-start; word-wrap: break-word; display: flex; flex-direction: column; align-items: center;"><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>

Answer 3

Just add flex-direction:column to the element that has display:flex. Otherwise, it's trying to horizontally center an element that alredy has 100% width.

Also, for future reference, you should simplify your code sample as much as possible. Almost all of your styles are irrelevant to the question and make it harder to solve.

<div style="height: 590px">
    <div style="height: inherit; background-color: #fcc; display: flex; justify-content: center; flex-direction: column">
        <div style=""><p>Placeholder text.Placeholder text. Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p><p>Placeholder text.</p></div>
    </div>
</div>