本文摘要
使用Flex布局实现div内子元素垂直居中，将父div的`display`设为`flex`，并设置`align-items: center;`。父div设置一定高度以观察效果，子元素将自动垂直居中。同时可调整子元素的背景色、内边距等样式。此布局适用于需要垂直对齐元素的场景。
要使用Flex布局实现div内部子元素的垂直居中，你可以将父div的`display`属性设置为`flex`，然后利用Flex布局的`align-items`属性来控制子元素的垂直对齐。以下是一个简单的示例：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局垂直居中示例</title>
<style>
.container {
display: flex;
height: 200px; /* 设置一个高度以便观察垂直居中效果 */
border: 1px solid #000; /* 可选，增加边框以显示容器边界 */
align-items: center; /* 垂直居中子元素 */
}
.item {
background-color: #ccc; /* 可选，设置子元素背景色 */
padding: 10px; /* 可选，增加内边距 */
margin: 0 auto; /* 水平居中（如果需要的话），但在这里不是必需的 */
text-align: center; /* 可选，文本水平居中 */
}
</style>
</head>
<body>
<div>
<div>我是垂直居中的元素</div>
</div>
</body>
</html>在这个示例中，`.container`类被应用到一个`div`元素上，这个`div`元素是父容器，并且设置了`display: flex;`以启用Flex布局。然后，我们设置了`align-items: center;`来将容器内的子元素（在这种情况下是`.item`类）垂直居中。`.container`还设置了一个高度，这样我们就可以看到垂直居中的效果。
`.item`类用于样式化子元素，你可以根据需要调整其样式，如背景色、内边距等。在这个例子中，我们还添加了`text-align: center;`来使文本在子元素中水平居中，但这并不是垂直居中的直接要求，而是为了让文本看起来更整齐。
最后，我们在HTML中使用`.container`和`.item`类来创建包含垂直居中元素的容器。
专题推荐：