HTML 图片居中显示：三种简单方法

要使HTML图片居中，可以使用CSS样式来实现。\n\n1. 使用CSS的margin属性将图片水平居中：\ncss\nimg {\n display: block;\n margin-left: auto;\n margin-right: auto;\n}\n\n\n2. 使用CSS的flexbox布局将图片水平和垂直居中：\ncss\n.container {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n在HTML中，将图片包裹在一个具有.container类的元素中：\nhtml\n<div class="container">\n <img src="image.jpg" alt="图片">\n</div>\n\n\n3. 使用CSS的position属性将图片相对于其父元素居中：\ncss\n.container {\n position: relative;\n}\n\nimg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n在HTML中，将图片包裹在一个具有.container类的元素中：\nhtml\n<div class="container">\n <img src="image.jpg" alt="图片">\n</div>\n\n\n这些方法都可以使HTML图片在页面中水平居中显示。你可以根据需要选择其中一种方法。