html - Flex 使用 justify-content

Question

我有以下代码片段，我需要在其中对齐框中心的文本。

我应该尽可能使用 flex 并尽量避免“文本对齐”。

目前我正在使用 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 方向:列； 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>