Question

我正在寻找以下解决方案。我想在中间放置一个像<img src='placehold.png' alt=''>的图像元素。因此，高度是视口的高度，宽度将自动设置，图像的中间应位于视口宽度的中间。

我搜索的一个例子就像下面的网站; http://bravepeople.co/

Answer 1

<img src="placehold.png" alt="" style="margin: 0px auto;">

Answer 2

垂直和水平居中的一个解决方案是使用javascript：

function centerElement(elem){
    elem.style.position="absolute";
    elem.style.top=(window.innerHeight-image.offsetHeight)/2+"px";
    elem.style.left=(window.innerWidth-image.offsetWidth)/2+"px";
}

Working Example

Answer 3

尝试使用图像容器：

style {
text-align:center;
}

Answer 4

根据链接判断，您似乎想将图像定位为背景图像？不要在<img>元素中声明它，而是使用图像URL作为父容器的背景图像，并使用以下代码：

div {
    background-image: url(placehold.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Or background-size: contain; if you want to keep the full image in view */
    width: 100%;
    height: 100vh;
}

http://jsfiddle.net/teddyrised/8guRR/

否则，如果要将其保留为独立元素，可以使用以下HTML：

<div>
    <img src="http://placehold.it/2048x1600" />
</div>

和CSS：

div {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
div img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

http://jsfiddle.net/teddyrised/wPuNs/

如何将图像元素放在视口中间？

4 个答案: