如何使固定大小的主体（或div）始终位于页面的中心（甚至垂直）！ [英] How to make the body (or div) of fixed size stay always in the center of the page (even vertically!)
问题描述
我试图让一个1024x768的机体始终保持在页面的中心（上下间距相同，左右），但是我在做这件事时遇到了麻烦。
我使用距离顶部50％的技巧，然后我将（绝对）身体定位在-384px，这是768的一半。
然而，这种方法给了我一个问题：如果你的窗口小于768px，你会得到一个滚动条，但是身体上部的一部分会被剪切掉，而不会向上滚动我仍然可以向下滚动）。
如何解决它？
编辑1： 可以在简单的html网页上打印的Html代码： 添加： http://jsfiddle.net/thirtydot/TGjN8/9/ （全屏： http ：//jsfiddle.net/thirtydot/TGjN8/9/show/ ） I'm trying to make a 1024x768 body to stay always in the center of the page (top-bottom with same spacing, left-right too) however I'm having troubles in doing it. I used the trick of spacing from top by 50%, then I positioned (absolutely) the body at -384px, which is half of 768. However this method gives me a problem: if your window is smaller than 768px, you get a scrollbar but a part of the upperside of the body get cut, without any possibility to scroll up (I can still scroll down). How to solve it? Edit 1:
Here is some code: Html code that can be printed on a simple html web page:
Add this: http://jsfiddle.net/thirtydot/TGjN8/9/ (fullscreen: http://jsfiddle.net/thirtydot/TGjN8/9/show/ ) 这篇关于如何使固定大小的主体（或div）始终位于页面的中心（甚至垂直）！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
$ b $ ul
<！DOCTYPE html>
< html lang =en>
< head>
< title>测试< /标题>
< style>
/ **
*更改页面的基本背景颜色
* /
html
{
background-color：blue;
}
/ **
*将主体设置为屏幕中心的1024 x 768矩形
* /
body
{
background-color：red;
font-family：TradeGothic，sans-serif;
margin-left：-512px;
margin-top：-384px;
位置：绝对;
height：768px;
width：1024px;
剩下：50％;
top：50％;
}
< / style>
< / head>
< body>
一些文本
< / body>
< / html>
html {
position：relative;
min-width：1024px;
min-height：768px;
身高：100％;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
/**
* Change the basic background color of the page
*/
html
{
background-color: blue;
}
/**
* Set the body as a 1024 x 768 rectangle in center of the screen
*/
body
{
background-color: red;
font-family: TradeGothic, sans-serif;
margin-left: -512px;
margin-top: -384px;
position: absolute;
height: 768px;
width: 1024px;
left: 50%;
top: 50%;
}
</style>
</head>
<body>
some text
</body>
</html>
html {
position: relative;
min-width: 1024px;
min-height: 768px;
height: 100%;
}
