css图片居中不好,厉害了我的哥,css图片居中原来有这么多种方法

图片的居中显示 css 有很多方法，但在很多情况下有的方法无效，这是件很头疼的事情，比如

一般设置图片属性

​text-align:center

​

水平居中，但这个方法经常无效，很多前端工程师都有研究过或者说是搜索过

CSS 图片居中方法吧。

但其实CSS 图片居中有多种不同的情况，也有多种不同的解决方法，具体方法如下所示：

图片居中又分为水平居中和垂直居中

提示：在你开始阅读以下内容之前，你可以先了解CSS图片的基础内容。

一、水平居中：

1、单独文字垂直居中我们只需要设置 CSS 样式line-height属性即可。

2、文字与图片同排，在设置div高度同时再对此 CSS 样式的图片“img”样式设置​vertical-align:middle​垂直居中属性，如:​img{vertical-align:middle;}​ 。

3 不确定宽度的块级元素设置水平居中的方法

(1)是使用​table​ 作为容器的方法来实现。当然不大推荐使用这种方法，因为添加了无意义的标签。这里就稍微介绍一下吧。​Table​ 标签本身并不是块级元素，当我们不设置​table​的宽度的话，他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置​table​的宽度，直接设置​table​的外边距​margin：0 auto;​就可以实现水平居中了!这样我们就可以通过设置​table​水平居中，间接使里面的内容居中。

(2)相对于用​table​的方法的好处是不用增加无语义标签，简化标签嵌套深度。这个思路是这样的，通过改变块级元素的​display​属性值为​inline​类型