Flex布局實現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`類來創建包含垂直居中元素的容器。
