css照片居中怎么写(css怎么让照片居中)

在div+css中怎样让图片垂直居中

有一个垂直居中的属性:vertical-align:middle;把定义的元素放置在父元素的中部。

CSS中如何实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两点： 1.垂直居中； 2.图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/ width:200px; height:200px; border: 1px solid #eee;}.box img { /*设置图片垂直居中*/ vertical-align:middle;}" /

CSS如何实现让图片垂直居中

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。

直接上CSS代码：#pic{width:300px;

height:300px;

background-color:green;

border:6pxsolid#ccc;

text-align:center;

position:relative;

display:table-cell;

vertical-align:middle;}#picp{*position:absolute;top:50%;left:50%;}#picpimg{*position:relative;top:-50%;left:-50%;}#pic是容器，里面放一个p容器，该容器采用绝对定位，最后插入图片，图片采用相对定位。

这里用到了一个hack,*只有IE浏览器可以识别，Firefox不认识