css让字体居中显示

基础概念

CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的外观和格式。CSS让字体居中显示是指通过CSS样式使文本内容在其容器内水平或垂直居中对齐。

类型

水平居中：
- 使用 text-align: center;
- 使用 margin: 0 auto;（适用于块级元素）

垂直居中：
- 使用 line-height（适用于单行文本）
- 使用 display: flex; align-items: center;（适用于容器内的元素）
- 使用 display: grid; align-items: center;（适用于容器内的元素）
- 使用 position: absolute; top: 50%; transform: translateY(-50%);（适用于绝对定位的元素）

应用场景

网页标题居中显示
表单输入框和标签对齐
图片和文字的对齐
弹窗或模态框中的文本居中

示例代码

以下是一些常见的CSS居中示例：

水平居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平居中示例</title>
    <style>
        .center-text {
            text-align: center;
        }
        .center-block {
            display: block;
            margin: 0 auto;
            width: 200px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="center-text">
        这是水平居中的文本
    </div>
    <div class="center-block">
        这是水平居中的块级元素
    </div>
</body>
</html>

垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直居中示例</title>
    <style>
        .flex-container {
            display: flex;
            align-items: center;
            height: 200px;
            background-color: #f0f0f0;
        }
        .grid-container {
            display: grid;
            align-items: center;
            height: 200px;
            background-color: #f0f0f0;
        }
        .absolute-center {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        这是垂直居中的文本（Flexbox）
    </div>
    <div class="grid-container">
        这是垂直居中的文本（Grid）
    </div>
    <div class="absolute-center">
        这是垂直居中的文本（Absolute Positioning）
    </div>
</body>
</html>