css实现文字的水平垂直居中

最新推荐文章于 2025-02-10 16:29:16 发布

原创最新推荐文章于 2025-02-10 16:29:16 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

Web前端开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了使用行高、单元格和Flex布局三种方法实现CSS中的文字水平垂直居中。通过设置行高与盒子高度一致，将元素转换为表格单元格并设置vertical-align，以及利用Flex布局的justify-content和align-items属性，可以达到理想的居中效果。

文章目录

1.用行高实现
2.用单元格实现
3.用Flex布局实现

1.用行高实现

实现思路：

将行高设置成与盒子高度一样的值，这样就可以把文字移到盒子的垂直中心了。

当高度一样的时候，它们的垂直中心就会在同一行，起点都会从垂直中心出发。

再设置水平居中的对齐方式，就能实现水平居中。

接下来，就能实现水平垂直居中的效果了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height:400px; 
            background-color: green;
            border: 10px solid gray;
            line-height: 400px;
            text-align: center;
        }
    </style>
</head>
<body>    
        <div class="box">666</div>
</body>
</html>

2.用单元格实现

实现思路：

将盒子设置成table cell，也就是表格的列。

盒子变成表格之后，就可以设置单元格垂直居中了，也就是vertical-align: middle;

再设置文本对齐方式，就能实现一行内的文本居中。

接着，就会出现水平垂直居中的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height:400px; 
            background-color: green;
            border: 10px solid gray;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>    
        <div class="box">666</div>
</body>
</html>

3.用Flex布局实现

Flex是Flexible Box的缩写，意思是弹性布局，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。

justify-content属性 : 定义了项目在主轴上的对齐方式。简单来说是坐标轴的x轴，采用横向的排列方式。

align-items属性 : 定义项目在交叉轴上如何对齐。简单来说是坐标轴的y轴，采用纵轴的排列方式。

参考网址：https://www.runoob.com/w3cnote/flex-grammar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 400px;
            height:400px; 
            background-color: green;
            border: 10px solid gray;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>    
        <div class="box">666</div>
</body>
</html>