让一张图片垂直水平居中

最新推荐文章于 2024-04-25 13:27:51 发布

原创最新推荐文章于 2024-04-25 13:27:51 发布 · 841 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML和CSS实现图片在页面上居中显示的方法。通过设置图片的margin为auto，并结合绝对定位，可以使图片无论在何种屏幕尺寸下都能保持居中。这种方法适用于创建响应式网页设计。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pic{
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom:0;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://img.alicdn.com/simba/img/TB1O07LJeSSBuNjy0FlSuvBpVXa.jpg" class="pic">
    </div>
</body>
</html>