图片居中显示是HTML布局页面常见需求。
在本文中，俺将和大家探讨将图片居中的多种实现方法。
下面准备好，俺们即将发车~
请参阅下面的在线演示和源代码。 您也可以打开web开发者工具检查元素。
容器
在第一个示例中，俺将向您介绍如何将图片放置在容器元素（例如div，段落或任何其他标签）的中间。
/**
* 前端教程网 https://www.pipipi.net/
**/
//HTML
<p class="aligncenter">
<img src="image.jpg" alt="centered image" />
</p>
//css
<style>
.aligncenter {
text-align: center;
}
</style>俺使用text-align:center; CSS属性来实现。
使用margin
我们可以使用margin：auto; 使其居中。 但是我们知道img标签是内联元素，不是块元素，因此我们需要使用display:block;将img标签设置位块元素。
/**
* 前端教程网 https://www.pipipi.net/
**/
//HTML
<div>
<img class="marginauto" src="image.jpg" alt="centered image" />
</div>
//css
<style>
.marginauto {
margin: 10px auto 20px;
display: block;
}
</style>center标签
虽然这是一个解决办法，但是俺非常不推荐使用center标签。
center标签已过时，这意味着HTML5不再支持该标记，但Google Chrome等网络浏览器仍支持该标记。
虽然在好几年前这是首选方法，而且它不需要设置CSS，只需要设置HTML，听起来很酷？但是可以用CSS解决的，我们就不应该用html呀 : )
/**
* 前端教程网 https://www.pipipi.net/
**/
<center>
<img src="/image.jpg" alt="centered image" />
</center>标签属性 align=middle
与上一个示例相似，另一个不需要CSS的过时方法。 在较旧的HTML版本中，我们可以将用align =“ middle”标签属性设置图片居中。
/**
* 前端教程网 https://www.pipipi.net/
**/
<img align="middle" src="image.jpg" alt="myimage" />垂直图片居中
我们已经讨论过了如何水平对齐图像，但是在某些情况下可能需要将其垂直居中。
为此，我们必须采取两个步骤。 容器元素需要显示为表格单元格，并且垂直对齐必须设置为中间。
在俺的示例代码中，俺设置了容器高度，以确保其高于图片。
/**
* 前端教程网 https://www.pipipi.net/
**/
//HTML
<div class="verticalcenter">
<img src="image.jpg" alt="centered image" />
</div>
//CSS
<style>
.verticalcenter {
display: table-cell;
height: 400px;
vertical-align: middle;
}
</style>水平垂直居中图片
我们可以组合水平和垂直对齐方式代码，示例代码如下：
/**
* 前端教程网 https://www.pipipi.net/
**/
//HTML
<div class="verticalhorizontal">
<img src="image.jpg" alt="centered image" />
</div>
//CSS
<style>
.verticalhorizontal {
display: table-cell;
height: 300px;
text-align: center;
width: 300px;
vertical-align: middle;
}
</style>