Flexbox 垂直居中

创作时间:

作者:

@小白创作中心

Flexbox 垂直居中

引用

来源

https://docs.pingcode.com/baike/3309317

在网页开发中，使文本垂直居中是一个常见的需求。通过CSS的Flexbox布局、使用CSS的Grid布局、利用CSS的Transform属性、在父元素中使用Table-cell属性，都可以实现这一效果。其中，使用CSS的Flexbox布局是最简单且最常见的方法，通过将父元素设置为Flex容器，并使用相应的对齐属性，可以轻松实现文本的垂直居中。

下面我们将详细介绍实现文本垂直居中的多种方法。

一、通过CSS的Flexbox布局

Flexbox布局是一种强大的布局模型，允许更简单的布局和对齐方式。以下是使用Flexbox布局实现文本垂直居中的步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 使容器高度占满整个视口 */
        }
    </style>
    <title>Flexbox 垂直居中</title>
</head>
<body>
    <div class="container">
        <div>垂直居中的文本</div>
    </div>
</body>
</html>

在上面的例子中，我们将父元素.container设置为Flex容器，并使用justify-content: center和align-items: center来分别水平和垂直对齐子元素，从而实现文本的垂直居中。

二、使用CSS的Grid布局

CSS Grid布局是一种基于网格的布局系统，适用于创建复杂的布局。以下是使用Grid布局实现文本垂直居中的步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: grid;
            place-items: center;
            height: 100vh; /* 使容器高度占满整个视口 */
        }
    </style>
    <title>Grid 垂直居中</title>
</head>
<body>
    <div class="container">
        <div>垂直居中的文本</div>
    </div>
</body>
</html>

在这个例子中，父元素.container被设置为Grid容器，通过place-items: center属性同时在水平和垂直方向上对齐子元素，从而实现文本的垂直居中。

三、利用CSS的Transform属性

Transform属性可以用来移动或调整元素的位置。以下是使用Transform属性实现文本垂直居中的步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            position: relative;
            height: 100vh; /* 使容器高度占满整个视口 */
        }
        .container div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <title>Transform 垂直居中</title>
</head>
<body>
    <div class="container">
        <div>垂直居中的文本</div>
    </div>
</body>
</html>

在这个例子中，我们使用position: absolute将子元素定位在父元素的中央，通过top: 50%和left: 50%将子元素移动到父元素的中点，再通过transform: translate(-50%, -50%)将子元素自身的中心点对齐到父元素的中点，从而实现文本的垂直居中。

四、在父元素中使用Table-cell属性

将父元素设置为表格单元格，可以利用表格单元格的对齐特性实现文本垂直居中。以下是使用Table-cell属性实现文本垂直居中的步骤：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: table;
            height: 100vh; /* 使容器高度占满整个视口 */
            width: 100%;
        }
        .container div {
            display: table-cell;
            vertical-align: middle;
            text-align: center; /* 水平居中 */
        }
    </style>
    <title>Table-cell 垂直居中</title>
</head>
<body>
    <div class="container">
        <div>垂直居中的文本</div>
    </div>
</body>
</html>

在这个例子中，我们将父元素.container设置为表格，并将子元素设置为表格单元格，通过vertical-align: middle属性实现子元素在垂直方向上的居中对齐。