有关于网页布局中图片垂直水平居中的一些技巧

 

图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center;

如果只能用图片

分两种情况：
1.图片宽高固定，这种情况很简单。

水平居中：就在图片的css中加 dispaly:block;margin:0 auto;
垂直居中：自己算出（div的高度-图片的高度）/2，得到margin-top值即可。

针对此垂直居中方法的JS代码如下，

window.οnlοad=function(){
var img = document.getElementById("imgId");
var div = document.getElementById("divId");
var marginTop = div.offsetHeight - img.height;
img.style.marginTop = (marginTop/2) + "px";
}

 

或者通过给div设定text-align:center;可使图片水平居中，再给图片img设定 vertical-align:middle;

即可达到垂直居中（切记，是给图片加，不是div，很多人容易搞错）

2.图片高度未知，这个布局比较难实现。一般我是用js做的。

水平居中：同上，在图片的css中加 dispaly:block;margin:0 auto;
垂直居中：用js算出（div的高度-图片的高度）/2，得到margin-top值赋给它。

 

转载于:https://www.cnblogs.com/tunshiyublogs/p/9358037.html