Flex布局實現div內部子元素垂直居中的代碼示例

雲端運算與程式碼 2024年05月01日 00:01 559 品悟

本文摘要

使用Flex布局實現div內子元素垂直居中，將父div的`display`設為`flex`，並設置`align-items: center;`。父div設置一定高度以觀察效果，子元素將自動垂直居中。同時可調整子元素的背景色、內邊距等樣式。此布局適用於需要垂直對齊元素的場景。

要使用Flex布局實現div內部子元素的垂直居中，你可以將父div的`display`屬性設置為`flex`，然後利用Flex布局的`align-items`屬性來控制子元素的垂直對齊。以下是一個簡單的示例：

HTML:

Flex布局實現div內部子元素垂直居中的代碼示例第1张

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