css图片居中（CSS实现图片居中的技巧）

CSS实现图片居中的技巧 随着网页的发展，图片成为网页上不可避免的部分，而让图片居中是一个经常需要用到的技巧。本文将介绍几种常用的CSS实现图片居中的方法。 一、使用text-align属性 使用text-align属性可以将块级元素内部的文本、图片等水平居中，不过需要注意的是只能使用于块级元素。下面的例子中，我们使用了一个div包裹了img标签，并设置text-align: center;将图片水平居中。

使用text-align属性实现居中：

二、使用margin属性 使用margin属性可以将元素居中，这种方法主要适用于宽高已知的元素。思路就是通过设置元素的左右margin值相等，使得元素居中。下面的例子中，我们使用了一个div包裹了img标签，并设置margin: 0 auto;将图片水平居中。

使用margin属性实现居中：

三、使用flex布局 使用flex布局可以方便地将元素居中，且适用于宽高未知的元素。使用flex布局需要设置元素的display为flex，然后使用justify-content和align-items属性分别设置水平和垂直居中。下面的例子中，我们使用了一个div包裹了img标签，并设置display: flex; justify-content: center; align-items: center;将图片水平垂直居中。

使用flex布局实现居中：

通过以上三种方法，我们可以灵活地将图片居中。不过需要注意的是，在实际应用中需要根据实际需求灵活运用，选择最适合自己的方法实现图片居中。