Flex 布局实现文字垂直居中：简单易懂的步骤和示例

在Flex布局中，可以使用align-items: center;属性来实现字垂直居中。具体步骤如下：\n\n1. 在父容器上添加display: flex;属性，将其设置为Flex布局。\n2. 使用align-items: center;属性，将子元素垂直居中对齐。\n\n示例代码如下：\n\nHTML:\nhtml\n<div class="container">\n <p>垂直居中的文字</p>\n</div>\n\n\nCSS:\ncss\n.container {\n display: flex;\n align-items: center;\n height: 200px; /* 设置容器的高度，方便观察效果 */\n border: 1px solid black; /* 添加边框，方便观察容器位置 */\n}\n\np {\n margin: 0;\n}\n\n\n在上述示例中，.container是父容器，.container p是子元素。通过设置align-items: center;属性将子元素垂直居中对齐。