CSS：在页面的正中间制作一张图片

Posted 2023-03-05

【中文标题】CSS：在页面的正中间制作一张图片

【英文标题】：CSS: Make an image in the exact middle of the page

【发布时间】：2011-12-17 13:23:31

【问题描述】：

我想在页面的正中间制作一个图像中心，所以它是垂直和水平居中的！我可以用 765x741 做到这一点吗？谢谢！

【问题讨论】：

你搜索过网络吗？ css-tricks.com/snippets/css/…

是的！你已经尝试过什么？你试过或看过any of these questions (and their answers)吗？

页面上还有其他内容吗？

不，只有那个图像。 :P

【参考方案1】：

是的，你可以像已经建议的那样在 CSS 中创建一个静态类：

.centerPic

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

但是这种方法限制了您使用其他不同尺寸的图片。我建议您在 dynamic 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 设置）

【参考方案2】：

为图片创建 css 类。

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

【参考方案3】：

是的，你可以！下面的css就可以了

.centerImg

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

【参考方案4】：

使用边距：auto auto;

我认为这是最好的方法

【参考方案5】：

我是这样解决的：

img.class-name

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