哎呦，兄弟姐妹们，今天咱们聊聊怎么把图片摆正！
你有没有遇到过这样的尴尬情况？
一张美美的图片，你想把它放在页面中央，可它就是不听话，东倒西歪，简直是“不服管教”！
别急，今天我就来手把手教你，如何用CSS把图片摆到你想放的地方，让你分分钟变身网页设计高手！
我们得问问：你想让图片怎么居中？
1. 你想让图片在网页中水平居中，就像把图片放在一条水平线上一样？
简单！你只需要在图片的CSS样式中添加 text-align: center;
css
img {
text-align: center;
就像这样，图片就乖乖地“站”在了正中央！
2. 你想让图片在网页中垂直居中，就像把图片放在一条垂直线上一样？
嘿嘿，这可有点难度。咱们得用点“技巧”！
你可以尝试用 display: flex; 属性，将图片的父元素设置成flex容器，然后用 align-items: center; 属性将图片垂直居中。
css
.container {
display: flex;
align-items: center;
height: 200px;
border: 1px solid black;
img {
height: 100px;
是不是瞬间就“服服帖帖”了？
3. 你想让图片在网页中水平和垂直都居中，就像把图片放在一个“十字路口”一样？
这个嘛，就更需要用到我们的小技巧啦！
最常用的方法就是 margin: auto;
css
img {
display: block;
margin: auto;
width: 50%;
是不是超级方便？
4. 你想让图片在文字中间居中？
这种场景最常见了，比如你想在文章中插入一张图片，而且还想让图片和文字排在一起。
这个时候，我们就需要用 vertical-align: middle;
css
img {
vertical-align: middle;
这样一来，图片就乖乖地“站”在了文字中间，不再“调皮捣蛋”啦！
5. 你想让图片在表格中居中？
表格里的图片居中， 我们可以利用 align属性 和 valign属性 来实现。
html
这样，图片就会在表格单元格中水平和垂直居中了！
怎么样，是不是很简单？
表格中图片居中还可以用 text-align:center 和 vertical-align:middle 属性， 以及 display:block 和 margin:auto 属性来实现。
下面我整理了一张方便大家快速了解不同的方法：
| 方法 | 描述 | 代码示例 | 适用场景 | |
|---|---|---|---|---|
| align 属性 | 设置表格内容水平对齐 | 表格单元格水平居中 | ||
| valign 属性 | 设置表格内容垂直对齐 | 表格单元格垂直居中 | ||
| text-align: center; | 设置文本水平居中 | 表格单元格水平居中 | ||
| vertical-align: middle; | 设置文本垂直居中 | 表格单元格垂直居中 | ||
| display: block; margin: auto; | 设置元素水平垂直居中 | | 表格单元格水平垂直居中 |
其实，想要把图片摆正并不难，关键是要找到适合的方法。
现在你学会了吗？
快去试试吧！
如果你还有其他欢迎随时来问我！
我们下次再见！