html怎么把img图片居中

作者：若离发布日期:2026-04-27 浏览:109

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 使用flexbox布局将图片居中 */
        .center {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 使容器高度为视口高度 */
        }
    </style>
</head>
<body>
    <!-- 创建一个div容器，并将图片放入其中 -->
    <div class="center">
        <img src="your-image-url.jpg" alt="示例图片">
    </div>
</body>
</html>

解释说明：

HTML结构：我们创建了一个<div>容器，并将图片放在这个容器内。
CSS样式：
- display: flex;：使用Flexbox布局，这是一种强大的布局方式，可以轻松实现居中对齐。
- justify-content: center;：水平居中对齐。
- align-items: center;：垂直居中对齐。
- height: 100vh;：使容器的高度等于视口高度（即浏览器窗口的高度），确保图片在页面中垂直居中。

这样，图片就会在页面中水平和垂直居中显示。

上一篇：html 多选框

下一篇：outerhtml