在网页设计中，图片作为页面的重要组成部分，往往需要设置为居中显示。本篇文章将介绍如何通过CSS让图片居中显示。
第一种方法：使用text-align属性
text-align属性是指定一个元素内文本内容的水平对齐方式，一般用于块级元素，但也可用于行内元素。当将text-align属性设置为center时，该元素内的文本内容会水平居中对齐。而当文本内容为图片时，此时图片也会随之居中显示。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
}
</style>
</head>
<body>
<div class="center">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>如上代码所示，通过将图片嵌套于一个具有text-align:center属性的div元素中，即可实现图片居中显示。
第二种方法：使用margin属性
margin属性用于设置元素的外边距，将元素向外推离其它元素或边界。当使用margin属性时，设置其左右边距均为auto，则元素内容将自动居中对齐。
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img src="example.jpg" alt="example image" class="center">
</body>
</html>如上代码所示，通过将图片添加class属性，然后再CSS样式中将该class元素的marginLeft和marginRight都设置为auto，同时将display属性设置为block，即可实现图片居中显示。
第三种方法：使用flex布局
flex布局是一种弹性盒子模型，允许更好地控制伸缩容器中的项目。flexbox通过属性align-items、justify-content和align-self来控制子元素在容器中的对齐方式。当将flex的属性align-items和justify-content都设置为center时，容器内的项目将自动居中对齐。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<img src="example.jpg" alt="example image">
</div>
</body>
</html>如上代码所示，通过在一个包含图片的父容器中添加flex布局属性，即可让图片自动居中对齐。
综上所述，以上三种方法都能够轻松实现图片居中显示。可以根据具体情况选择合适的方法，从而达到最佳的显示效果。
以上是图片怎么居中css的详细内容。更多信息请关注PHP中文网其他相关文章！
