CSS设置单行文字水平垂直居中的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文字水平垂直居中</title>
    <style>
        div {
     
            /* 给div设置宽高 */
            width: 400px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            /* 设置行高为盒子的高度 */
            line-height: 200px;
            /* 设置文字水平居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div>我是要水平垂直居中的文字</div>
</body>
</html>

效果图:
请添加图片描述

相关推荐

  1. css垂直水平几种实现方式

    2024-01-28 07:30:04       56 阅读
  2. CSS水平垂直实现

    2024-01-28 07:30:04       37 阅读
  3. CSS实现块级元素水平垂直3种常用方式

    2024-01-28 07:30:04       42 阅读
  4. 实现元素水平垂直方法

    2024-01-28 07:30:04       44 阅读
  5. CSS垂直四种实现方式

    2024-01-28 07:30:04       56 阅读
  6. CSS水平垂直居中元素多种方式

    2024-01-28 07:30:04       66 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-28 07:30:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-28 07:30:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-28 07:30:04       82 阅读
  4. Python语言-面向对象

    2024-01-28 07:30:04       91 阅读

热门阅读

  1. 探索 Xind3 生态系统,解锁铭文资产的新玩法

    2024-01-28 07:30:04       59 阅读
  2. 2024/1/27 备战蓝桥杯 1

    2024-01-28 07:30:04       61 阅读
  3. 获取el-select的label

    2024-01-28 07:30:04       54 阅读
  4. Little云盘测试用例

    2024-01-28 07:30:04       53 阅读
  5. BGP故障分析——邻居无法建立的原因

    2024-01-28 07:30:04       48 阅读
  6. linux系统ansible工具简介与安装

    2024-01-28 07:30:04       54 阅读
  7. spring+drools

    2024-01-28 07:30:04       53 阅读
  8. gdb调试std::list和std::vector等容器的方法

    2024-01-28 07:30:04       45 阅读
  9. 什么是 React的refs?为什么它们很重要

    2024-01-28 07:30:04       49 阅读