一、使用text-align属性居中
使用text-align属性可以对图片进行简单的水平居中。具体做法是在包含图片的父元素上添加样式：
<div style="text-align:center;">
<img src="picture.jpg">
</div>
该方法适用于父元素的宽度大于或等于图片宽度的情况。如果父元素宽度小于图片宽度，则图片将左对齐。
二、使用margin属性居中
使用margin属性可以实现水平和垂直方向的居中。具体做法是在包含图片的父元素上添加以下样式：
<div style="text-align:center;">
<img src="picture.jpg" style="margin: auto;">
</div>
这个方法同样适用于父元素的宽度大于或等于图片宽度的情况。如果父元素宽度小于图片宽度，则图片将溢出父容器。
三、使用flexbox布局居中
使用flexbox布局可以在任意尺寸的父元素中居中内容。假设我们要使包含图片的父元素水平和垂直居中，则将其样式设置如下：
<div style="display: flex; align-items: center; justify-content: center;">
<img src="picture.jpg">
</div>
这个方法同样适用于父元素的宽度小于图片宽度的情况。如果需要在水平方向上使图片不溢出，则可以增加如下样式：
<img src="picture.jpg" style="max-width: 100%;">
四、使用position属性居中
使用position属性可以精确控制图片的位置。假设我们要水平垂直居中的图片大小为200px x 200px，将其样式设置如下：
<div style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="picture.jpg" style="width: 200px; height: 200px;">
</div>
该方法可以在任意父元素中实现水平垂直居中，不受父元素尺寸限制。
五、使用table-cell居中
使用table-cell布局可以将多个元素在列中对齐，可以很方便地实现垂直和水平方向上的居中。将包含图片的标签的display属性设置为table-cell以及其父元素的display属性设置为table和vertical-align属性设置为middle。具体做法如下：
<div style="display: table; height: 100%;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<img src="picture.jpg" style="max-width: 100%;">
</div>
</div>
该方法适用于父元素尺寸大于或等于图片尺寸的情况。当父元素尺寸小于图片尺寸时，图片将溢出父元素。
综上所述，我们可以使用不同的方法在HTML中居中一张图片，具体方法选择根据实际情况而定。以下为完整代码示例： <div style="text-align:center;">
<img src="picture.jpg">
</div>
<div style="text-align:center;">
<img src="picture.jpg" style="margin: auto;">
</div>
<div style="display: flex; align-items: center; justify-content: center;">
<img src="picture.jpg">
</div>
<div style="position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);">
<img src="picture.jpg" style="width: 200px; height: 200px;">
</div>
<div style="display: table; height: 100%;">
<div style="display: table-cell; vertical-align: middle; text-align: center;">
<img src="picture.jpg" style="max-width: 100%;">
</div>
</div>
