是否在节标记中使用CSS垂直对齐文本

Question

我发布了一个我正在做的例子

.open-text {
color: pink;
/*border: 1px solid red;*/
/* display: flex !important; */
/* align-items: center !important; */
background: #1e3a87;
font-family: 'Open Sans Condensed', sans-serif;
/*justify-content: center;*/
}

<section>
<h1 class="open-text">
<br/>
Lorem Ipsum: usage. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text.your life.
</h1>
</section>

如何将文本放在中间，使其成为宽度不占整页的居中列？

Answer 1

您对display: flex的尝试有效，只需删除<br/>(我还添加了一个height，这样您就可以看到这是集中的(：

.open-text {
color: pink;
display: flex;
align-items: center;
background: #1e3a87;
font-family: 'Open Sans Condensed', sans-serif;
height:200px;
}

<section>
	<h1 class="open-text">
Lorem Ipsum: usage. Lorem ipsum is a pseudo-Latin text used in web design, typography, layout, and printing in place of English to emphasise design elements over content. It's also called placeholder (or filler) text.your life.
	</h1>
</section>