css图片居中的几种方法总结

居中显示图片是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>

A 文本对齐：居中； CSS 属性来实现这一点。

边距的使用

您可以使用 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 标签已弃用，这意味着 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>