display:flex如何实现
时间: 2023-08-27 12:14:23 浏览: 41
使用display: flex可以通过设置align-items: center来实现垂直居中。这样子元素会在容器中垂直居中对齐。你可以在容器的样式中添加display: flex和align-items: center来实现这个效果。例如:
```html
<style>
.box-more-flex{
display: flex;
align-items: center;
}
</style>
<h2>多行 flex</h2>
<div class="box box-more-flex">
<p>多行文本, 多行文本, 多行文本, 多行文本, 多行文本, 多行文本</p>
</div>
```
在上面的例子中,使用了display: flex和align-items: center来实现多行文本的垂直居中效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [display:box、display:flex实现多行文本垂直居中](https://blog.csdn.net/mouday/article/details/102951969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]