垂直和水平居中图像答案

【问题标题】：Center Image Vertical and Horizontal垂直和水平居中图像
【发布时间】：2013-05-18 03:51:41
【问题描述】：

我倾向于在我设计的每个网站上都这样做，但实际上我还没有找到真正的好方法来做到这一点。一家公司通常会给我他们的标志，我把它放在屏幕中间，当你进入页面时，它会自动将你转发到主页。如果没有一堆表格和 div，我似乎无法找到一种在屏幕中间居中图像的好方法！有什么好的建议吗？！

【问题讨论】：

Image center align vertically and horizontally的可能重复
更多垂直居中方式：blog.themeforest.net/tutorials/vertical-centering-with-css

标签： css

【解决方案1】：

img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}

<body>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRMtBiLioXqfhufpptex_ta8kGJa5UDQS3aITpBetR8EwH5GGDTJw" />   
</body>

相关：Center a div

【讨论】：

【解决方案2】：

你不说图像大小是否已知。

有几种方法可以做到这一点，我喜欢在带有id="centreme"（如果图像是 200x200）的图像上使用一些 CSS，并为整个页面添加一个包装器

div#contentwrapper {
    width:100%;
    height:100%;
    position:relative;
}
img#centreme {
    position: relative;
    width: 200px;   /* the image width */
    height: 200px;  /* the image height */
    top: 50%;
    left: 50%;
    margin-top: -100px;  /* half the image height */
    margin-left:-100px;  /* half the image width */
}

小提琴让你玩http://jsfiddle.net/7PYzB/2/

【讨论】：

【解决方案3】：

您可以使用 JavaScript 计算中心点并将其定位在边距或顶部（使用 position:relative/absolute），但这并不是很干净。

我假设您说的是启动页面，所以这里是一个简单的示例（尽管在其他情况下我不建议像我所做的那样修改 body 标记）：

<!doctype html>
<html>
    <head>
        <title>blah</title>
        <style type="text/css">
            html,body {margin:0;padding:0;width:100%;height:100%;}
            body {display:table;}
            p {display:table-cell;text-align:center;vertical-align:middle;}
        </style>
    </head>
    <body>
        <p>Hello World - This could have an image in it</p>
    </body>
</html>

诀窍在于 CSS：

您希望水平和垂直居中的项目显示为表格单元格：display:table-cell
您希望居中的项目的父级（容器）显示为表格：display:table
确保表格显示元素占据了您想要居中的整个区域。
您希望居中的项目必须被告知水平对齐（@987654325@ 声明）和垂直（vertical-align:middle 声明）
text-align 和 vertical-align 属性仅以这种特殊方式工作，因为元素显示为 table-cell

【讨论】：

【解决方案4】：

就个人而言，我喜欢使用display: table-cell 方法。

例如，如果我的 HTML 是：

<div class="wrapper">
     <img src="http://placehold.it/150x50" alt="Company ABC" />
</div>

那么我的 CSS 应该是：

div.wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 600px;
    height: 200px;
}

如果我无法使用上述方法，另一个可行的选择是使用line-height 属性。

行高方法的 HTML：

<div class="wrapper">
    <img src="http://placehold.it/150x50" alt="Company XYZ" />
</div>

行高方法的CSS：

img {
    line-height: 300px;
}

【讨论】：

【解决方案5】：

您可以尝试在 HTML 中使用 div，如下所示：

<div id='dv'></div>

并使用这样的背景图片：

#dv {
    background: url('http://pieisgood.org/images/slice.jpg') no-repeat 0 0;
    background-position: center;
}

html,body,#dv { /* so that the #dv can fill up the page */
    width:100%;
    height:100%;
}

Fiddle

【讨论】：

如果图像具有重要的上下文价值，则背景图像不是最佳解决方案。
但即使在最旧的浏览器中也可以使用，这对于在登录页面上为它们提供支持更为重要
太棒了！你怎么能调整图像的大小呢？假设它是 1000x900 而我只想要 400x300？ @门把手
@jadeallencook 你可以使用background-size: 400px 300px;
刚刚遇到另一个问题。如果我想以与 400 x idk 相同的方式将 div 居中怎么办？