Flex 使用 justify-content

Question

我有以下sn-p代码，我需要在框的中心对齐文本。

如果可能，我应该使用 flex 并尽量避免'text-align'。

目前我正在使用 justify-content: center;但没有结果。

知道如何解决吗？是不是只能用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

通过将display: flex; flex-direction: column; align-items: center; 添加到您的内部 div 将使文本水平居中

<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 2

只需将flex-direction:column 添加到具有display:flex 的元素即可。否则，它会尝试将已经具有 100% 宽度的元素水平居中。

此外，为了将来参考，您应该尽可能简化代码示例。几乎你所有的风格都与问题无关，因此更难解决。

<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>

Answer 3

<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;
}

提琴手https://jsfiddle.net/Lbwv7wuh/1/