HTML + CSS 如何使图片居中(Webkit)

最新推荐文章于 2024-02-04 09:44:50 发布

laoyouzhazi

最新推荐文章于 2024-02-04 09:44:50 发布

阅读量9k

点赞数 2

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_21264377/article/details/109393398

版权

关键词由CSDN通过智能技术生成

CSS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML

4 篇文章 0 订阅

订阅专栏

手动设置标签的尺寸，可以较轻松实现目标的位置定位。比如通过width、height、margin和padding的具体数值限定或绝对定位。在不确切知道图片大小的情况下，使图片自适应完全居中是一个难点。完全居中是指水平和垂直同时居中。

一、设置标签的margin属性为auto

这是最简单的一种方法。将img标签的的style设置为： margin:auto;

<html>
<head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>img_d2ce69b1_15531.jpg (2400×1600)</title>
</head>
<body style="margin: 0px;background: #0e0e0e;">
    <img style="margin: auto;" src="http://192.168.1.100:9001/image/2020_03_27/img_d2ce69b1_15531.jpg">
</body>
</html>

二、移动端设置display属性为flex

移动端，如Android Webkit的Chrome浏览器，和PC端不一样，不能通过方法一实现图片完全居中。但是，在移动端可以通过display属性的配套设置实现自适应居中的目标。

<html>
<head><meta name="viewport" content="width=device-width, minimum-scale=0.1"><title>img_d2ce69b1_15531.jpg (2400×1600)</title>
</head>
<body style="margin: 0px; background: #0e0e0e; display:flex; flex-wrap:wrap; flex-content:center; items-align:center;">
    <img src="http://192.168.1.100:9001/image/2020_03_27/img_d2ce69b1_15531.jpg">
</body>
</html>