css图片和文字垂直居中

基础概念

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。垂直居中是指将元素在父容器中垂直方向上居中对齐。

类型

单行文本垂直居中：通过设置line-height等于容器的高度。
多行文本垂直居中：使用Flexbox或Grid布局。
图片垂直居中：可以使用Flexbox、Grid布局或绝对定位。

应用场景

网页布局中的标题、按钮、图片等元素的对齐。
响应式设计中的元素对齐。
移动应用中的UI组件对齐。

示例代码

单行文本垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Centering</title>
    <style>
        .container {
            height: 200px;
            border: 1px solid black;
        }
        .text {
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="text">垂直居中的文本</span>
    </div>
</body>
</html>

多行文本垂直居中（Flexbox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Centering</title>
    <style>
        .container {
            height: 200px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <p>这是垂直居中的多行文本。</p>
    </div>
</body>
</html>

图片垂直居中（Flexbox）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vertical Centering</title>
    <style>
        .container {
            height: 200px;
            border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/150" alt="示例图片">
    </div>
</body>
</html>