1. 图片居中的方法
在html中，图片通常使用标签引入，有多种方法可以使图片居中显示。
1.1 使用CSS居中
使用CSS将图片居中对于处理大量图片尤为方便，这种方法适用于需要样式控制的情况下。
我们可以使用CSS的布局属性text-align实现水平居中，vertical-align实现垂直居中，代码如下：
<style>
img{
display: inline-block;
margin: 0 auto; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
</style>
<body>
<img src="image.jpg" alt="图片">
</body>
该方法的核心是将标签的display属性设置为inline-block，使其能够使用margin属性的水平布局，同时使vertical-align属性生效。由于行内元素的默认vertical-align属性为baseline，所以必须将display设置为inline-block，以标识该元素的类型为行内块级元素。
需要注意的是，该方法仅适用于标签的水平和垂直居中，图片的左右和上下间距可能会受到页面布局的影响。
1.2 使用表格居中
使用表格居中也是一种简单常用的方法。我们创建一个1行1列的表格，将图片放在该表格中心位置即可，代码如下：
<table>
<tr>
<td><img src="image.jpg" alt="图片"></td>
</tr>
</table>
需要注意的是，该方法对表格的边框、背景色等属性进行了居中布局，可能不适用于所有情况。
1.3 使用flexbox居中
flexbox是一种CSS3的新特性，提供了灵活的布局方式。我们可以使用flexbox实现图片的居中，代码如下：
<style>
.container{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
img{
width: 50%; /* 图片占据容器50%的宽度 */
}
</style>
<div class="container">
<img src="image.jpg" alt="图片">
</div>
该方法的核心是将图片放在一个容器中，使用display:flex;将容器转变为一个可伸缩的外包装盒子。利用justify-content: center;和align-items:center;属性将容器内的元素水平垂直居中。需要注意的是，现代浏览器已经支持flexbox，但部分浏览器可能无法正常显示。
2. 图片垂直居中
在实际开发中，常常需要将图片垂直居中。有多种方法可以实现图片的垂直居中，下面介绍一些常见的方法。
2.1 使用flexbox垂直居中
上面已经介绍了使用flexbox实现图片的水平居中，同样flexbox也能够实现图片的垂直居中。代码如下：
<style>
.container{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
img{
width: 50%; /* 图片占据容器50%的宽度 */
margin-top: auto; /* 使图片上下间距相等 */
margin-bottom: auto;
}
</style>
<div class="container">
<img src="image.jpg" alt="图片">
</div>
该方法的核心是使标签上下间距相等，同时使用flexbox实现容器的垂直居中。由于设置上下间距相等之后，容器内元素已经实现了垂直居中，所以只需使用水平居中属性实现图片的水平居中即可。
2.2 使用绝对定位垂直居中
使用绝对定位垂直居中的方法比较灵活，但需要得到父元素的宽度和高度。代码如下：
<div class="container">
<img src="image.jpg" alt="图片">
</div>
<style>
.container{
position: relative; /* 设置容器为相对定位 */
width: 100%; /* 宽度100% */
height: 100vh; /* 设置高度为100vh */
}
img{
position: absolute; /* 设置图片为绝对定位 */
top: 50%; /* 顶部位置为50% */
transform: translateY(-50%); /* 使用translateY实现垂直居中 */
left: 50%; /* 左侧位置为50% */
width: 50%; /* 图片宽度占据容器50% */
}
</style>
该方法的核心是将容器的高度设置为100vh，同时使标签绝对定位，使用top属性使图片顶部位置居中，使用transform:translateY(-50%)实现图片在垂直方向上的居中。需要注意的是，该方法对于动态调整窗口大小的页面可能会产生不良影响。
2.3 使用表格垂直居中
使用表格可以实现图片的垂直居中。代码如下：
<table>
<tr>
<td style="vertical-align: middle;"><img src="image.jpg" alt="图片"></td>
</tr>
</table>
该方法的核心是将标签放在1行1列的表格中心位置，设置表格单元格垂直居中即可。
3. 总结
本文介绍了三种常见的图片居中方法，分别是使用CSS布局、表格布局和flexbox布局。同时也介绍了三种常见的图片垂直居中方法，分别是使用flexbox布局、绝对定位和表格布局。在实践中，应该根据具体情况选择最合适的方法，以达到最佳效果。