如何在HTML中居中图片
参考：how to center an image in html
在网站设计中，经常会遇到需要将图片居中显示的情况。在HTML中，有多种方法可以实现图片的居中显示，可以通过CSS样式或者使用HTML的标签属性来实现。下面我们将详细介绍如何在HTML中居中图片的方法。
使用CSS样式居中图片
方法一：使用text-align属性
通过将图片所在的父元素的text-align属性设置为center，可以实现图片的水平居中显示。
示例代码：
Output:
方法二：使用margin属性
可以使用CSS的margin属性来实现图片的居中显示，通过设置左右外边距为auto来将图片水平居中。
示例代码：
Output:
方法三：使用flex布局
通过将图片所在的父元素设置为flex布局，并使用align-items属性设置为center，可以实现图片在父元素中垂直居中显示。
示例代码：
Output:
使用HTML标签属性居中图片
方法一：使用align属性
在img标签中使用align属性，并将其值设置为center，可以实现图片在水平方向上居中显示。
示例代码：
Output:
方法二：使用style属性
可以直接在img标签中使用style属性来设置图片的样式，通过设置margin属性为auto来将图片水平居中。
示例代码：
Output:
方法三：使用表格
通过在表格中插入图片，可以实现图片在表格中居中显示。
示例代码：
|
Output:
以上就是在HTML中居中图片的多种方法，可以根据具体情况选择合适的方法来实现图片的居中显示。