垂直水平居中图片

Question

垂直水平居中图片

5

我在设计每个网站时都会这样做，但是我还没有找到一个真正好的方法来实现它。通常公司会给我他们的标志，我会将它居中放置在页面中央，然后自动转到主页。我似乎找不到一个好的方法来将图像居中放置在屏幕中央，而不需要使用大量的表格和div！有什么好建议吗？

- jadeallencook

1

可能是图像垂直水平居中对齐的重复问题。 - dsgriffin

更多垂直居中的方法：http://blog.themeforest.net/tutorials/vertical-centering-with-css/ - Robin Manoli

5个回答

4

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>

Related: Center a div

- antelove

1

个人而言，我喜欢使用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属性。

用于line-height方法的HTML：

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

CSS的行高方法：

img {
    line-height: 300px;
}

- user926352

1

你可以使用JavaScript来计算中心点，并使用margin或top（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
确保表格显示元素占据您想要居中对齐的整个区域。
必须告诉您希望居中的项目水平对齐（text-align:center声明）和垂直对齐（vertical-align:middle声明）
text-align和vertical-align属性之所以以这种特殊方式工作，是因为该元素显示为table-cell

"

- zamnuts

1

你没有说明图片大小是否已知。

有几种方法可以实现这一点，我更喜欢使用一些CSS，例如在具有id="centreme"的图像上（如果图像为200x200），以及整个页面的包装器。

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 */
}

这里有一个供您玩耍的 fiddle http://jsfiddle.net/7PYzB/2/

- Klors

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- tckmn · Accepted Answer

您可以尝试在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