加载时垂直和水平居中图像答案

【问题标题】：Vertically and Horizontally Center an Image On Load加载时垂直和水平居中图像
【发布时间】：2014-06-18 03:38:21
【问题描述】：

我想在文档加载后将图像居中。这就是问题所在。我的文档的宽度大于浏览器的高度，所以我不能垂直居中它相对于文档。我不能将它相对于浏览器高度垂直居中，因为如果用户在非全屏浏览器中打开文档，它的位置将不同于全屏。

基本上，我需要一种方法在全屏时在浏览器屏幕上居中显示图像，即使文档在非全屏时打开也是如此。

更新这是我尝试过的

<script>
$(document).ready(function() {
var docheight = $(window).height();
var logopositionheight = docheight/2;
var docwidth = $(window).width();
var logopositionwidth = docwidth/2;
$('#welcome_logo').css({position: 'absolute'});
$('#welcome_logo').css({top:logopositionheight-150});   
$('#welcome_logo').css({left:logopositionwidth-500});   
});
</script>

我也将 $(window) 更改为 $(document) 但由于我上面描述的原因都没有工作。

【问题讨论】：

到目前为止你尝试过什么？你遇到什么问题？你有任何可以分享的代码吗？也许设置一个 jsfiddle 来展示这个问题？
我更新了问题以包含我尝试过的内容。

标签： javascript html css alignment centering

【解决方案1】：

给图像一个top 和left 50% 然后从边距中减去图像高度和宽度的一半，例如，如果您的横向图像是 200 像素 x 100 像素，您应该写 margin: -100px 0 0 -50px，这应该使图像完美居中。

您可能还需要根据容器和偏好将position 元素更改为fixed 或absolute。

【讨论】：

这是针对整个文档的，我的文档比窗口大。我需要一个全尺寸窗口的中心，即使窗口不是全尺寸也能正常工作。

【解决方案2】：

就像@Shakesy 所说，您需要使用innerHeight 和innerWidth 来获取浏览器的“画布”尺寸。
一旦你知道了，你可以使用：
(( innerWidth / 2 ) - ( imageWidth / 2 ))来水平定位图像。
另外，可以使用：
@987654322 设置垂直位置@。
你可以把它放在页面加载“之后”。

【讨论】：

当页面加载的浏览器窗口不是全尺寸时，它不起作用。这是我的问题
为了清楚起见，为什么您的内容比 document.innerHeight 宽？您不应该努力使您的内容适合文档吗？
不是更宽，更高。它是滚动密集型的。我知道整个折叠的想法，但我正在制作一个带有一些滚动的网站。但这对我来说不是问题。就是在浏览器窗口不是全尺寸时加载它，使图像在该窗口上居中，这样当它是全尺寸时，图像保持在原位并且不正常。

【解决方案3】：

第一个选项，使用 JS（部分来自 user3592733 的回答）：

Javascript

function initialize(imageWidth, imageHeight) {
el.style.top = ""+(( innerHeight / 2 ) - ( imageHeight / 2 ))+"px";
el.style.left = ""+(( innerWidth / 2 ) - ( imageWidth / 2 ))+"px";
}
initialize();
// will update when browser is resized
window.onresize = initialize;

或者第二个选项，使用 CSS 和 display:table

主页

<style type="text/css">
.wrapperdiv {
position:absolute;
display:table;
width:100%;
height:100%;
}
.containerdiv {
display:table-cell;
text-align:center;
vertical-align:middle;
}
</style>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ifiedivdisplayinlineblock.css" />
<![endif]-->
</head>
<body>
<div class="wrapperdiv">
<div class="containerdiv">
content here
</div>
</div>

ifiedivdisplayinlineblock.css

.wrapperdiv {
display:inline-block;
}

这在 CSS 中有点痛苦，但我在我的页面上就是这样做的 :) 我认为非常不言自明

【讨论】：

css 选项使用百分比，从我目前看到的情况来看，这是行不通的。我也评论了 innerheight 和 innerwidth 的问题。

【解决方案4】：

浏览器的大小调整由操作系统处理，因此浏览器内的内容不是由操作系统本身“控制”，而是由浏览器本身呈现。因此，换句话说，当浏览器感知到用户正在调整其大小时，它可以向 javascript 发送一个触发器，通知它发生此类事件。
对于 Mozilla，您可以尝试
(1)@ 987654321@

【讨论】：