全部 / 前端 / 技术 · 2015年3月2日 0

永恒的水平垂直居中

CSS中居中问题是永远的话题特别是垂直居中,各路高手使出各种“奇异淫”的方法。前段时间一直搞JS,好久没有弄CSS了这次公司做了电商。遇到商品的图片需要处理,所以得总结一下,不能每次写都去查资料。

代码结构:

<div class="box">
	<img src="#" alt="" width="100" height="100">
</div>

.box{
	width: 400px;
	height: 400px;
	background-color:#999;
	text-align: center;
}

.box img{
	
}

下面就只写css代码。

1. ie9+,FF,Chrome等

.box img{
	position:relative;
	top:50%;
	transform:translateY(-50%);
}

这个问题会导致元素模糊,解决方法:在父级元素上添加__preserve-3d__。像下面:

.box{
	transform-style: preserve-3d;
}

2. ie8+,FF,Chrome等

.box{
	width: 400px;
	height: 400px;
	background-color:#999;
	text-align: center;

	display:table-cell;
	vertical-align: middle;
}

3. ie6+,FF,Chrome等

html:

<div class="box">
	<i></i><img src="#" alt="" width="100" height="100">
</div>

css:

.box img{
	vertical-align: middle;
}
.box i{
	display: inline-block;
	*display: inline;
	*zoom: 1;
	height: 100%;
	vertical-align: middle;
}

注:<i></i>要和<img/>元素紧挨着,这牵扯到inline-block的缝隙问题。

4. ie9+,FF,Chrome等

.box:before{
	display: inline-block;
	content:"";
	height: 100%;
	vertical-align: middle;
}
.box img{
	vertical-align: middle;
}

其实这个和上面的原理是一样的,只是说那个参考元素不要手动添加,如果你有代码洁癖并且浏览器兼容要求达到这个方法还是靠谱的。

5. ie8+,FF,Chrome等

.box{
	width: 400px;
	height: 400px;
	background-color:#999;
	position: relative;
}
.box img{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}

6. ie10+,FF,Chrome等

.box{
	width: 400px;
	height: 400px;
	background-color:#999;
	display:flex;
	justify-content:center;
	align-items:center;
}

7. ie6+,FF,Chrome等(图片尺寸已知)

.box{
	width: 400px;
	height: 400px;
	background-color: #666;
	position:relative;
}

.box img{
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -50px;
	margin-top: -50px;
}

以上就是总结和收集的一些方法,方便自己同时服务他人。

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

http://www.w3.org/Style/Examples/007/center

http://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height

http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div