有很多方法可以在图像中央显示css，但很多方法都是无效的。 这是一件令人头疼的事情。 例如
设置常规图像属性
文本对齐：中心
虽然是水平中心，但这种方法经常无效，很多前端工程师都研究过或检索过
是CSS图像的中央对齐方法吧。
但是，其实CSS图像的中央有一些不同的情况，也有一些不同的解决方法。 具体方法如下。
照片的中央分为水平中央和垂直中央
提示：开始阅读以下内容之前，请先了解CSS图像的基本内容。
一.水平居中：
1、要将单个字符垂直居中，请设置CSS样式的line-height属性。
2、字符与图像列相同，设置div的高度，同时为此CSS样式的图像“img”样式设置vertical-align:middle垂直居中属性。 例如： img { vertical-align 3360 middle； )。
3如何将不知道宽度的块级元素水平居中
)1)通过使用table作为容器的方法实现。 当然，由于添加了无意义的标签，不太推荐使用此方法。 在这里稍微介绍一下吧。 Table标签本身不是块级的要素，如果我们不设定Table的宽度，他里面的宽度就由他内部的要素的宽度来支撑。 但是，即使我们没有设定table的宽度，也可以直接设定table外侧的距离margin:0 auto； 可以实现水平方向的中间！ 这样，可以通过设置table的水平居中来间接居中内部内容。
)相对于使用table的方法的优点是，在不增加无意义的标签的情况下，简化标签嵌套的深度。 此思想将块级元素的display属性值更改为inline类型，并通过设置文本对齐：中心来实现居中对齐。 此方法也有一个缺点，就是将块级元素更改为内联元素后，内联元素的功能少于块元素。 例如，设定纵横值等，项目的运用可能有一些限制，但大家可以自己选择。
)3)将父元素设置为浮动，并将父元素的position属性设置为relative和left:50%的子元素将设置position:relative和left:-50%以实现水平居中。 其优点是块级元素仍显示为display:block，而不添加无意义的标记或添加嵌套深度。 确实，重点是设定了position:relative； 带来了一些副作用。 下面是第三种方法的实例代码，放入body标签中就可以了。
二.垂直居中：
对于这个CSS的核心问题，可以使用设置背景图像的方法。 例如：
body {BACKGROUND: url (“图像文件”) #FFF no-repeat center； }
重要的是这个center属性，意味着这个背景图像要放在容器的中央。 也可以将center替换为top left，或者直接写数字来调整位置。
方法一：
实例
div{
width:500px；
height:500px；
border:1pxsolid#666；
overflow :隐藏；
定位：关系；
显示：表单元格；
文本照明3360中心；
vertical-align :中间； }
请试试看
方法二：
实例
divp{
定位：静态；
定位：助手；
top:50%
}
img{
定位：静态；
定位：关系；
top:-50%； left:-50%；
垂直对齐： middle
}
请试试看
方法：
实例
img{
定位：静态；
定位：关系；
top:-50%； left:-50%；
vertical-align :中间； }
请试试看
方法四：
实例
*{margin:0； 垫：0； }
div{
width:500px； border:1pxsolid#666；
height:500px；
background : URL ((/statics/images/W3C/intro.png ) ) centerno-repeat； }
请试试看
三.为什么在css图像的中央使用text-align:center也没有效果？
实例
div{
border:1p
x solid red;margin:20px;
text-align:center;
}
尝试一下 »
四、如何让图片在DIV中水平和垂直两个方向都居中？
方法一：
思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
结构如下：
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：
释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：(DIV的高度 – 图片的高度)/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得居中
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；(有的设计师为图片再加个 div 标签，然后通过 div 标签的margin实现居中，也可以，不过，在结构中就又多了对 div，相对麻烦点)至于垂直居中的方法和前面的都一样，就不再重述。
以上方法都是有前提的，就是必须知道 DIV 与图片的尺寸，否则无法完成垂直居中的效果。
用一行css居中并裁剪图片的方法
设置图片的裁剪尺寸非常简单，你只需在 CSS 里使用这行代码：
img {
object-fit: cover;
}
就是这样。不需要语义、包装 div 或者其他没意义的代码。
这种技术能很好地把大小不合适的头像图片裁剪为正方形或者圆形的图片。以下面那只熊的宽图片来举例。一旦把 object-fit:cover技术应用在这种图片上，并且设置好宽和高，图片自己就会进行裁剪和居中。
object-fit:cover的裁剪方式和background-size:cover的完全相同，不过它是用来为 imgs、videos 和其他的媒体标签设置样式的，而不是给背景图片设置样式。
相当多的最新浏览器都支持 object-fit 技术，并且还有 polyfill 项目让你能在更老的浏览器(IE8+)里使用该技术。