blocks|key|226237|text|我猜你想让框在垂直和水平方向上居中，而不管浏览器窗口的大小。由于长方体的宽度和高度是固定的，因此应该可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226238|标记：|offset|length|style|BOLD|226239|<div></div>|code-block|syntax|javascript|226240|CSS:|226241|div+{
++++height:+200px;
++++width:+400px;
++++background:+black;

++++position:+fixed;
++++top:+50%25;
++++left:+50%25;
++++margin-top:+-100px;
++++margin-left:+-200px;
}|226242|即使您调整了浏览器的大小，div也应该保持在屏幕的中心。只需将页边距-顶部和边距-左侧替换为表格高度和宽度的一半。|226243|编辑:归功于CSS-Tricks，我最初的想法就是在这里得到的。|226244|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/^0|0|0|3|0|0|0|4|0|0|0|6|A|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>I'm guessing you want to center the box both vertically and horizontally, regardless of browser window size. Since you have a fixed width and height for the box, this should work:</p>

<p><strong>Markup:</strong></p>

<pre><code>&lt;div&gt;&lt;/div&gt;
</code></pre>

<p><strong>CSS:</strong></p>

<pre><code>div {
    height: 200px;
    width: 400px;
    background: black;

    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;
}
</code></pre>

<p>The div should remain in the center of the screen even if you resize the browser. Just replace the margin-top and margin-left with half of the height and width of your table.</p>

<p>Edit: Credit goes to <a href="http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/">CSS-Tricks</a>, where I got the original idea.</p>


blocks|key|2876296|text|如果你想让内容水平和垂直居中，但又不知道你的页面会有多高，你必须使用JavaScript。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2876297|HTML：|2876298|<body>
++++<div+id="content">...</div>
</body>|code-block|syntax|javascript|2876299|CSS：|2876300|#content+{
++++max-width:+1000px;
++++margin:+auto;
++++left:+1%25;
++++right:+1%25;
++++position:+absolute;
}|2876301|JavaScript+(使用jQuery)：|2876302|$(function()+{
++++$(window).on('resize',+function+resize()++{
++++++++$(window).off('resize',+resize);
++++++++setTimeout(function+()+{
++++++++++++var+content+=+$('#content');
++++++++++++var+top+=+(window.innerHeight+-+content.height())+/+2;
++++++++++++content.css('top',+Math.max(0,+top)+%2B+'px');
++++++++++++$(window).on('resize',+resize);
++++++++},+50);
++++}).resize();
});|2876303|​|2876304|📷|atomic|offset|length|2876305|2876306|演示：http://jsfiddle.net/nBzcb/|2876307|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/71851d0ce9061581ff56499187537618.png|imageAlt|1|LINK|MUTABLE|url|http://jsfiddle.net/nBzcb/^0|0|0|0|0|0|0|0|0|0|1|0|0|0|3|Q|1|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1H|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1J|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1L|8|@]|9|@]|A|$]]|$1|S|3|T|5|U|7|1M|8|@]|9|@$V|1N|W|1O|1|1P]]|A|$]]|$1|X|3|R|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@$V|1S|W|1T|1|1U]]|A|$]]|$1|10|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17|18|-4]]|19|$5|1A|14|1B|A|$1C|1D]]]]

<p>If you want to center the content horizontally and vertically, but don't know in prior how high your page will be, you have to you use JavaScript.</p>

<p>HTML:</p>

<pre class="lang-xml prettyprint-override"><code>&lt;body&gt;
    &lt;div id="content"&gt;...&lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>CSS:</p>

<pre class="lang-css prettyprint-override"><code>#content {
    max-width: 1000px;
    margin: auto;
    left: 1%;
    right: 1%;
    position: absolute;
}
</code></pre>

<p>JavaScript (using jQuery):</p>

<pre class="lang-js prettyprint-override"><code>$(function() {
    $(window).on('resize', function resize()  {
        $(window).off('resize', resize);
        setTimeout(function () {
            var content = $('#content');
            var top = (window.innerHeight - content.height()) / 2;
            content.css('top', Math.max(0, top) + 'px');
            $(window).on('resize', resize);
        }, 50);
    }).resize();
});
</code></pre>

<p><a href="http://jsfiddle.net/nBzcb/" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ABTtr.png" alt="Centered horizontally and vertically"></a></p>

<p>Demo: <a href="http://jsfiddle.net/nBzcb/" rel="nofollow noreferrer">http://jsfiddle.net/nBzcb/</a></p>


blocks|key|224068|text|您发布的代码的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|224069|.center{
++++position:absolute;
++++width:780px;
++++height:650px;
++++left:50%25;
++++top:50%25;
++++margin-left:-390px;
++++margin-top:-325px;
}

<table+class="center"+width="780"+border="0"+align="center"+cellspacing="2"+bordercolor="#000000"+bgcolor="#FFCC66">
++++++<tr>
++++++++<td>
++++++++<table+width="100%25"+border="0">
++++++<tr>
++++++++<td>
++++++++<table+width="100%25"+border="0">
++++++++<tr>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Company.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Location.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="300"><img+src="images/banners/Closet.jpg"+width="300"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Company.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Location.jpg"+width="149"+height="130"+/></td>++++++++
++++++++</tr>
++++++++</table>
++++++++</td>
++++++</tr>
++++++<tr>
++++++++<td>
++++++++<table+width="100%25"+border="0">
++++++++<tr>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Company.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Location.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="300"><img+src="images/banners/Closet.jpg"+width="300"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Company.jpg"+width="149"+height="130"+/></td>
++++++++++++<td+width="150"><img+src="images/banners/BAX+Location.jpg"+width="149"+height="130"+/></td>++++++++
++++++++</tr>
++++++++</table>
++++++++</td>
++++++</tr>
</table>|code-block|syntax|javascript|224070|--|224071|这是如何工作的？|offset|length|style|BOLD|224072|示例：http://jsfiddle.net/953Yj/|224073|<div+class="center">
++++Lorem+ipsum
</div>

.center{
++++position:absolute;
++++height:+X+px;
++++width:+Y+px;
++++left:50%25;
++++top:50%25;
++++margin-top:-+X/2+px;
++++margin-left:-+Y/2+px;
}|224074|你的height.|224075|Y将是你的宽度。|unordered-list-item|224076|224077|要垂直和水平放置div，请将X和Y除以2。|CODE|224078|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/953Yj/^0|0|0|0|0|8|0|3|Q|0|0|0|0|0|1|0|0|8|3|E|1|G|1|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1A|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1B|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|1C|8|@$K|1D|L|1E|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1F|8|@]|9|@$K|1G|L|1H|1|1I]]|A|$]]|$1|Q|3|R|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1K|8|@]|9|@]|A|$]]|$1|U|3|V|5|W|7|1L|8|@$K|1M|L|1N|M|N]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1P|8|@$K|1Q|L|1R|M|10]|$K|1S|L|1T|M|N]|$K|1U|L|1V|M|N]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1W|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]]]

<p>Solution for the code you posted:</p>

<pre><code>.center{
    position:absolute;
    width:780px;
    height:650px;
    left:50%;
    top:50%;
    margin-left:-390px;
    margin-top:-325px;
}

&lt;table class="center" width="780" border="0" align="center" cellspacing="2" bordercolor="#000000" bgcolor="#FFCC66"&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;table width="100%" border="0"&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;table width="100%" border="0"&gt;
        &lt;tr&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Company.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Location.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="300"&gt;&lt;img src="images/banners/Closet.jpg" width="300" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Company.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Location.jpg" width="149" height="130" /&gt;&lt;/td&gt;        
        &lt;/tr&gt;
        &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;
        &lt;table width="100%" border="0"&gt;
        &lt;tr&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Company.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Location.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="300"&gt;&lt;img src="images/banners/Closet.jpg" width="300" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Company.jpg" width="149" height="130" /&gt;&lt;/td&gt;
            &lt;td width="150"&gt;&lt;img src="images/banners/BAX Location.jpg" width="149" height="130" /&gt;&lt;/td&gt;        
        &lt;/tr&gt;
        &lt;/table&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>--</p>

<p><strong>How this works?</strong></p>

<p>Example: <a href="http://jsfiddle.net/953Yj/" rel="noreferrer">http://jsfiddle.net/953Yj/</a></p>

<pre><code>&lt;div class="center"&gt;
    Lorem ipsum
&lt;/div&gt;

.center{
    position:absolute;
    height: X px;
    width: Y px;
    left:50%;
    top:50%;
    margin-top:- X/2 px;
    margin-left:- Y/2 px;
}
</code></pre>

<ul>
<li><strong>X</strong> would your your height.</li>
<li><strong>Y</strong> would be your width.</li>
</ul>

<p>To position the <code>div</code> vertically and horizontally, divide <strong>X</strong> and <strong>Y</strong> by <em>2</em>.</p>


blocks|key|220847|text|HTML|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|220848|<!DOCTYPE+html>
<html>
++++<head>
++++++++<title>Center</title>++++++++
++++</head>
++++<body>
++++++++<div+id="main_body">
++++++++++some+text
++++++++</div>
++++</body>
</html>|code-block|syntax|javascript|220849|CSS|220850|body
{
+++width:+100%25;
+++Height:+100%25;
}
#main_body
{
++++background:+#ff3333;
++++width:+200px;
++++position:+absolute;
}​|220851|JS+(+jQuery+)|220852|$(function(){
++++var+windowHeight+=+$(window).height();
++++var+windowWidth+=+$(window).width();
++++var+main+=+$("#main_body");++++
++++$("#main_body").css({+top:+((windowHeight+/+2)+-+(main.height()+/+2))+%2B+"px",
++++++++++++++++++++++++++left:((windowWidth+/+2)+-+(main.width()+/+2))+%2B+"px"+});
});|220853|请参见示例here|220854|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/darkking/z8pTa/^0|0|4|0|0|0|3|0|0|0|D|0|0|5|4|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1D|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|U|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p><strong>HTML</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Center&lt;/title&gt;        
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="main_body"&gt;
          some text
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>body
{
   width: 100%;
   Height: 100%;
}
#main_body
{
    background: #ff3333;
    width: 200px;
    position: absolute;
}​
</code></pre>

<p><strong>JS ( jQuery )</strong></p>

<pre><code>$(function(){
    var windowHeight = $(window).height();
    var windowWidth = $(window).width();
    var main = $("#main_body");    
    $("#main_body").css({ top: ((windowHeight / 2) - (main.height() / 2)) + "px",
                          left:((windowWidth / 2) - (main.width() / 2)) + "px" });
});
</code></pre>

<p>See example <a href="http://jsfiddle.net/darkking/z8pTa/" rel="nofollow">here</a></p>


<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="https://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page">How to align a &lt;div&gt; to the middle of the page</a>  </p>
</blockquote>



<p>I need is to show the content of a web page in the middle of the screen, no matter what screen size it is, big or small, resolution high or low, it always gets automatically adjusted to the middle of screen.</p>


How to set page content to the middle of screen?

jQuery

 可能重复：我需要的是在屏幕的中间显示网页的内容，无论屏幕尺寸是大是小，分辨率是高还是低，它总是自动调整到屏幕的中间。

问如何将页面内容设置到屏幕中间？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将页面内容设置到屏幕中间？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将页面内容设置到屏幕中间？
EN