Question

我想在文档加载后将图像居中。这是一个问题。我的文档宽度大于浏览器的高度，因此我无法相对于文档垂直居中。我不能相对于浏览器高度垂直居中，因为如果用户在不是全屏的浏览器中打开文档，它的定位将与全屏不同。

基本上，我需要一种在全屏时将图像置于浏览器屏幕中心的方法，即使文档在未全屏时打开也是如此。

更新这是我试过的

<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>

我还将$（窗口）更改为$（文档），但由于我上面所描述的原因，它都没有工作。

Answer 1

为图片提供top和left 50%，然后从边距中减去图像高度和宽度的一半，例如，如果你的风景图像是200px x 100px，你会写margin: -100px 0 0 -50px，这应该使图像完美居中。

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

Answer 2

就像@Shakesy说的那样，你需要让你的浏览器＆＃34;画布＆＃34;具有innerHeight和innerWidth的尺寸。
一旦你得到它，你可以水平定位图像：
(( innerWidth / 2 ) - ( imageWidth / 2 )) 。
另外，垂直位置可以设置为：
(( innerHeight / 2 ) - ( imageHeight / 2 )) 。
您可以把这个＆＃34;放在＆＃34;之后页面已加载。

Answer 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并显示：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的痛苦，但这就是我在我的页面上做的方式:)我觉得非常自我解释

Answer 4

重新调整浏览器的大小由操作系统处理，因此浏览器内的内容不会被操作系统“控制”，而是由浏览器本身呈现。因此，换句话说，当浏览器感觉到用户正在调整大小时，它可以向javascript发送触发器，通知它这样的事件。
对于Mozilla，你可以试试（1 ）https://developer.mozilla.org/en-US/docs/Web/API/Window.onresize

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

4 个答案: