Problems with vertical centering and divs taking up space_问答_开发者

Problems with vertical centering and divs taking up space

开发者 https://www.devze.com 2023-03-22 09:15 出处：网络

I\'ve got a few problems that I\'ve been trying to r开发者_如何转开发emedy today. I have an image 930 pixels high that I want to center in the exact middle of the screen. I used a recommended CSS sni

相关专题：css

I've got a few problems that I've been trying to r开发者_如何转开发emedy today.

I have an image 930 pixels high that I want to center in the exact middle of the screen. I used a recommended CSS snippet.

position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 930px;
margin-top: -465px;
margin-left: -640px;

But unfortunately, if the viewport is smaller than 930px, it starts to crop the top of the area. I've tried a few methods, but nothing seems to help.

Also, in Chrome I've managed to get it so a number of sized, but moved divs don't require scrolling, however in Firefox and IE they seem to still take up space that they would before moving (using left: and top:)

Any help would be appreciated, thanks.

I have a ugly solution but it works except for IE<8:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>

<body>
    <div id="positioner"></div><!--
    --><img src="yourimage" alt="" id="image" />
</body>
</html>

And CSS:

html,body,#positioner {
    margin:0;
    padding:0;
    height:100%;
}
body {
    text-align:center;
}
#positioner {
    display:inline-block;
    vertical-align:middle;
}
#image {
    max-height:100%;
    max-height:100%;
    vertical-align:middle;
}