Question

我想在页面的正中间创建一个图像中心，因此它的中心是垂直和水平的！我可以用765x741做到吗？谢谢！

Answer 1

为图像创建css类。

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

Answer 2

是的，因为您可以在CSS中创建静态类，如已建议的那样：

.centerPic
{
    position:fixed;
    left: 50%;
    top: 50%;
    margin-left:-382px; /* Static value */
    margin-top:-370px; /* Static value */
}

但是这种方法 限制了您对其他不同尺寸照片的使用 。我建议您根据动态javascript中的图片大小设置margin-left和margin-top属性，而不是：

function SetCenterStyle (objPic)
{
    objPic.className = "centerPic";
    objPic.style.marginLeft = ( -1 * ( parseInt(objPic.width) / 2 ) ) + "px";
    objPic.style.marginTop = ( -1 * ( parseInt(objPic.height) / 2 ) ) + "px";
}

（然后你可以省略centerPic类中的margin-left和margin-top设置）

Answer 3

是的，你可以！以下css将会这样做

.centerImg
{
    position:fixed;
    left:50%;
    top:50%;
    margin-left:-382px /*half the width*/
    margin-top:-370px /*half the height*/
}

Answer 4

使用保证金：自动自动;

我认为这是最好的方式

Answer 5

虽然您有一个固定大小的图片，但请查看this question（和接受的答案），找出解决图片或浏览器未定尺寸的解决方案。

Answer 6

我这样解决了：

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}

CSS：在页面的正中间制作图像

6 个答案: