html 图片居中

作者：爱我者我必爱* 发布日期:2026-01-09 浏览:48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 图片居中</title>
    <style>
        /* 使用 Flexbox 布局使图片水平和垂直居中 */
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 设置容器高度为视口高度 */
        }
    </style>
</head>
<body>
    <div class="center-container">
        <img src="your-image-url.jpg" alt="示例图片" />
    </div>
</body>
</html>

解释说明：

HTML 结构:
- 使用一个 div 容器来包裹图片，类名为 center-container。
- img 标签用于显示图片，并设置 src 属性为图片的 URL。
CSS 样式:
- .center-container 使用了 Flexbox 布局 (display: flex)。
- justify-content: center 使内容在水平方向上居中。
- align-items: center 使内容在垂直方向上居中。
- height: 100vh 设置容器的高度为视口高度，确保图片在页面中央显示。

通过这种方式，图片可以在页面中水平和垂直居中。

上一篇：html语言中的转行标记是

下一篇：html 特殊字符