html图片居中

作者：血染胸毛发布日期:2026-05-26 浏览:52

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用 Flexbox 布局使图片水平和垂直居中 */
        .center-image {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center;     /* 垂直居中 */
            height: 100vh;           /* 设置容器高度为视口高度 */
        }
    </style>
</head>
<body>
    <!-- 创建一个包含图片的 div -->
    <div class="center-image">
        <img src="your-image-url.jpg" alt="Centered Image">
    </div>
</body>
</html>

解释说明：

HTML 结构:
- 使用了一个 div 元素来包裹图片，并给这个 div 添加了类名 center-image。
- 图片通过 <img> 标签插入，src 属性设置为图片的 URL，alt 属性提供替代文本。
CSS 样式:
- .center-image 类使用了 Flexbox 布局 (display: flex)，这是一种强大的布局方式，可以轻松实现元素的居中对齐。
- justify-content: center; 用于将子元素（即图片）在主轴方向（水平方向）上居中。
- align-items: center; 用于将子元素在交叉轴方向（垂直方向）上居中。
- height: 100vh; 设置 div 的高度为视口高度的 100%，确保图片可以在整个页面内居中显示。

这样，无论图片的实际尺寸如何，它都会在页面中水平和垂直居中显示。

上一篇：nav在html中是什么意思

下一篇：border在html中是什么意思