如何设置图片居中
在网站的设计中，图片的使用是必不可少的。有时候，我们需要让图片在页面中居中显示，这时候需要弄清楚如何设置图片居中。
方法一：使用text-align属性
text-align 属性可以用来设置元素中文本的对齐方式，其取值可以是 left、right、center 等。
在图片所在容器元素中设置 text-align:center 即可使图片居中。
代码示例：
<div style="text-align:center;"> <img src="example.jpg">
</div>
这里使用 div 元素包裹图片，设置 div 的 text-align 属性即可使图片居中。
方法二：使用margin属性
另外一种常见的居中方式是使用 margin 属性，将元素的外边距设为 auto。
代码示例：
<div style="margin:0 auto;"> <img src="example.jpg">
</div>
这里的 margin:0 auto; 表示将顶部和底部的外边距设为 0，左右外边距自动均分。这样就能使图片在容器中水平居中。
方法三：使用flexbox布局
弹性盒子布局（Flexbox）是一种非常方便的居中方式。可以在容器元素上设置 display:flex; 和 justify-content:center;，将子元素（这里是图片）水平居中。
代码示例：
<div style="display:flex;justify-content:center;"> <img src="example.jpg">
</div>
总结
以上三种方法都可以实现图片水平居中，根据需求选择不同的方法即可。
对于垂直居中，有一些不同的技巧，比如使用 table-cell 布局或者使用 transform 属性。但是这些方法相对复杂，如果只是简单的居中，可以通过使用 padding 或者 line-height 属性来实现。
需要注意的是，居中是基于元素的父级容器而言的，因此，容器的宽度和高度，以及容器的定位属性都会影响居中效果。
最后需要注意的是，应该尽可能的使用 CSS 属性来实现居中效果，而不是使用 JavaScript 代码。因为 CSS 可以更好的保持页面的性能，减少代码的复杂度。
