极客教程如何在HTML中居中图片
参考：how to center an image in html
在网站设计中，经常会遇到需要将图片居中显示的情况。在HTML中，有多种方法可以实现图片的居中显示，可以通过CSS样式或者使用HTML的标签属性来实现。下面我们将详细介绍如何在HTML中居中图片的方法。
使用CSS样式居中图片
方法一：使用text-align属性
通过将图片所在的父元素的text-align属性设置为center，可以实现图片的水平居中显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.center-img {
text-align: center;
}
</style>
</head>
<body>
<div class="center-img">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</div>
</body>
</html>
Output:
方法二：使用margin属性
可以使用CSS的margin属性来实现图片的居中显示，通过设置左右外边距为auto来将图片水平居中。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.center-img {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" class="center-img" alt="Centered Image">
</body>
</html>
Output:
方法三：使用flex布局
通过将图片所在的父元素设置为flex布局，并使用align-items属性设置为center，可以实现图片在父元素中垂直居中显示。
示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.center-img {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 设置父元素高度 */
}
</style>
</head>
<body>
<div class="center-img">
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image">
</div>
</body>
</html>
Output:
使用HTML标签属性居中图片
方法一：使用align属性
在img标签中使用align属性，并将其值设置为center，可以实现图片在水平方向上居中显示。
示例代码：
<!DOCTYPE html>
<html>
<body>
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image" align="center">
</body>
</html>
Output:
方法二：使用style属性
可以直接在img标签中使用style属性来设置图片的样式，通过设置margin属性为auto来将图片水平居中。
示例代码：
<!DOCTYPE html>
<html>
<body>
<img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image" style="display: block; margin: 0 auto;">
</body>
</html>
Output:
方法三：使用表格
通过在表格中插入图片，可以实现图片在表格中居中显示。
示例代码：
<!DOCTYPE html>
<html>
<body>
<table style="margin: 0 auto;">
<tr>
<td><img src="https://how2html.com/wp-content/themes/dux/img/logo.png" alt="Centered Image"></td>
</tr>
</table>
</body>
</html>
Output:
以上就是在HTML中居中图片的多种方法，可以根据具体情况选择合适的方法来实现图片的居中显示。