blocks|key|3321022|text|我不认为你能做到。您可以位于文档的中间，但是您不知道工具栏布局或浏览器控件的大小。因此，您可以在文档中居中，但不能在浏览器窗口的中间。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3321023|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I don't think you can do that. You can be in the middle of the document, however you don't know the toolbar layout or the size of the browser controls. Thus you can center in the document, but not in the middle of the browser window.</p>


blocks|key|3108036|text|要做到这一点，您需要知道要居中的元素的大小。任何测量都可以(即px，em，百分比)，但它必须有一个固定的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3108037|css将如下所示：|3108038|+//+Replace+X+and+Y+with+a+number+and+u+with+a+unit.+do+calculations
+//+and+remove+parens
.centered_div+{
+++width:+Xu;
+++height:+Yu;
+++position:+absolute;
+++top:+50%25;
+++left:+50%25;
+++margin-left:+-(X/2)u;
+++margin-top:+-(Y/2)u;
}|code-block|syntax|javascript|3108039|编辑：以视口为中心。只能使用JavaScript在浏览器窗口中居中。但这可能已经足够好了，因为你可能想要显示一个弹出/模式框？|offset|length|style|BOLD|3108040|entityMap^0|0|0|0|0|2|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>To do this you need to know the size of the element you are centering. Any measurement will do (i.e. px, em, percent), but it has to have a fixed size.</p>

<p>The css will look as follows:</p>

<pre><code> // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}
</code></pre>

<p><strong>Edit</strong>: This centers in the viewport. You can only center in the browser window using JavaScript. But that might be good enough anyway, since you probably want to display a popup/modal box?</p>


blocks|key|3108047|text|<div+align="center">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3108048|或|unstyled|3108049|<div+style="margin:+0+auto;">|3108050|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;div align="center"&gt;
</code></pre>

<p>or</p>

<pre><code>&lt;div style="margin: 0 auto;"&gt;
</code></pre>


blocks|key|3108097|text|如果我理解正确的话，您希望基于窗口垂直和水平居中元素，而不是文档。这可能有点麻烦，但您可以使用javascript来检测窗口大小、滚动位置、元素大小等，然后将元素定位在窗口(不是文档，而是可视窗口)的中心。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3108098|如果您希望在滚动时此元素保留在窗口的模块中，则需要捕获scroll事件并调整位置。|3108099|不同的浏览器执行此操作的代码各不相同。|3108100|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>If I understand you correct, you want to center the element vertically and horizontally based on the window, not the document.  It can be a bit of a pain, but you can use javascript to detect the window size, scroll position, element size, etc. and then position the element in the center of the window (not the document, but the viewable window).</p>

<p>If you want this element to remain in the moddule of the window as you scroll you would need to capture the scroll event and adjust the position.</p>

<p>The code for doing this differs from one browser to the next.</p>


blocks|key|340339|text|要使div居中对齐，应应用样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340340|div+
{
++++margin:+0+auto;
}|code-block|syntax|javascript|340341|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To centre align a div you should apply the style</p>

<pre><code>div 
{
    margin: 0 auto;
}
</code></pre>


blocks|key|3108126|text|这是完全可能的，只需要CSS-不需要JavaScript：Here's+an+example|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3108127|下面是该示例背后的源代码：|3108128|<!DOCTYPE+html+PUBLIC+"-//W3C//DTD+HTML+4.01+Transitional//EN">
<html>
<head>++
<meta+http-equiv="content-type"+content="text/html;charset=ISO-8859-1">
<title>Dead+Centre</title>++
<style+type="text/css"+media="screen"></style>
</head>
<body>
<div+id="horizon">
++++<div+id="content">
++++++++<div+class="bodytext">
++++++++This+text+is<br>
++++++++<span+class="headline">DEAD+CENTRE</span><br>
++++++++and+stays+there!</div>
++++</div>
</div>
<div+id="footer">
++++<a+href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view+construction</a></div>
</body>
</html>|code-block|syntax|javascript|3108129|entityMap|0|LINK|mutability|MUTABLE|url|http://www.wpdfd.com/editorial/thebox/deadcentre3.html^0|T|H|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>This is completely possible with just CSS-- no JavaScript needed:
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre3.html" rel="noreferrer">Here's an example</a></p>

<p>Here is the source code behind that example:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;  
&lt;meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"&gt;
&lt;title&gt;Dead Centre&lt;/title&gt;  
&lt;style type="text/css" media="screen"&gt;&lt;!--
body 
    {
    color: white;
    background-color: #003;
    margin: 0px
    }

#horizon        
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

.bodytext 
    {
    font-size: 14px
    }

.headline 
    {
    font-weight: bold;
    font-size: 24px
    }

#footer 
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

a:link, a:visited 
    {
    color: #06f;
    text-decoration: none
    }

a:hover 
    {
    color: red;
    text-decoration: none
    }

--&gt;&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="horizon"&gt;
    &lt;div id="content"&gt;
        &lt;div class="bodytext"&gt;
        This text is&lt;br&gt;
        &lt;span class="headline"&gt;DEAD CENTRE&lt;/span&gt;&lt;br&gt;
        and stays there!&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;div id="footer"&gt;
    &lt;a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html"&gt;view construction&lt;/a&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|342689|text|你可以写一个JavaScript+wto，找到窗口的高度和宽度，并将其减半以找到中心点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342690|将你的东西添加到一个标签中，并将div的顶部和左侧从Javascript设置为您使用javascript找到的中心坐标。|342691|如果你需要代码，请告诉我。|342692|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>You could write a JavaScript wto find the window height and width and make it to half to find the centre point.</p>

<p>Add you stuff inside a  tag, and set the div top and left from the javascript to the centre coordinates you have found using Javascript.</p>

<p>Let me know if you need the code.</p>


blocks|key|337831|text|这是选中的，并且在所有浏览器中都有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|337832|<html>
++++<head>
++++++++<meta+http-equiv="Content-Type"+content="text/html;+charset=utf-8">

++++++++<style+type="text/css">
++++++++++++html,+body+{+margin:+0;+padding:+0;+height:+100%25;+}

++++++++++++#outer+{height:+100%25;+overflow:+hidden;+position:+relative;+width:+100%25;}
++++++++++++#outer[id]+{display:+table;+position:+static;}

++++++++++++#middle+{position:+absolute;+top:+50%25;+width:+100%25;+text-align:+center;}
++++++++++++#middle[id]+{display:+table-cell;+vertical-align:+middle;+position:+static;}

++++++++++++#inner+{position:+relative;+top:+-50%25;+text-align:+left;}
++++++++++++#inner+{margin-left:+auto;+margin-right:+auto;}
++++++++++++#inner+{width:+300px;+}+/*+this+width+should+be+the+width+of+the+box+you+want+centered+*/
++++++++</style>
++++</head>
++++<body>

++++++++<div+id="outer">
++++++++++++<div+id="middle">
++++++++++++++++<div+id="inner">
++++++++++++++++++++centered
++++++++++++++++</div>
++++++++++++</div>
++++++++</div>

++++</body>
</html>|code-block|syntax|javascript|337833|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is checked and works in all browsers.</p>

<pre><code>&lt;html&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

        &lt;style type="text/css"&gt;
            html, body { margin: 0; padding: 0; height: 100%; }

            #outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
            #outer[id] {display: table; position: static;}

            #middle {position: absolute; top: 50%; width: 100%; text-align: center;}
            #middle[id] {display: table-cell; vertical-align: middle; position: static;}

            #inner {position: relative; top: -50%; text-align: left;}
            #inner {margin-left: auto; margin-right: auto;}
            #inner {width: 300px; } /* this width should be the width of the box you want centered */
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;

        &lt;div id="outer"&gt;
            &lt;div id="middle"&gt;
                &lt;div id="inner"&gt;
                    centered
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|3108179|text|希望这能有所帮助。技巧是使用绝对定位并配置顶部和左侧列。当然，“死心”将取决于你嵌入的对象/div的大小，所以你需要做一些工作。对于登录窗口，我使用了以下内容-它对max-width和max-height也有一些安全性，在您的示例中可能会对您有所帮助。根据您的要求配置下面的值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3108180|div#wrapper+{
++++border:+0;
++++width:+65%25;
++++text-align:+left;
++++position:+absolute;
++++top:++20%25;
++++left:+18%25;
++++height:+50%25;
++++min-width:+600px;
++++max-width:+800px;
}|code-block|syntax|javascript|3108181|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Hope this helps. Trick is to use absolute positioning and configure the top and left columns. Of course "dead center" will depend on the size of the object/div you are embedding, so you will need to do some work. For a login window I used the following - it also has some safety with max-width and max-height that may actually be of use to you in your example. Configure the values below to your requirement.</p>

<pre><code>div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}
</code></pre>


blocks|key|339227|text|我很惊讶竟然没有人提到position=fixed。它完全符合我的要求，从7开始就可以在所有的“人类”浏览器和IE中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|339228|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I surprised that nobody said about position=fixed. It makes exactly what I asked and works in all "human" browsers and IE since 7.</p>


blocks|key|340416|text|下面是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|340417|340418|HTML%2BCSS唯一的解决方案-不需要JavaScript+|unordered-list-item|340419|它不要求您预先知道内容大小|340420|内容以窗口大小为中心调整|340421|340422|下面是示例：|340423|<!DOCTYPE+html>
<html>
++++<head>
++++++++<title>HTML+centering</title>

++++++++<style+type="text/css">
++++++++
++++++++</style>
++++</head>

++++<body>
++++++++<table+id="tbl_wrap"><tbody><tr><td+id="td_wrap">
++++++++


<div+style="border:+1px+solid+black;+display:+inline-block;">
This+content+will+be+centered.
</div>

++++++++
++++++++</td></tr></tbody></table>
++++</body>
</html>|code-block|syntax|javascript|340424|请查看原始网址以获取完整信息：http://krustev.net/html_center_content.html|offset|length|340425|你可以使用这段代码做任何你想做的事情。唯一的条件是任何派生的作品都必须有对原作者的引用。|340426|entityMap|0|LINK|mutability|MUTABLE|url|http://krustev.net/html_center_content.html^0|0|0|0|0|0|0|0|0|F|17|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|18|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|19|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|O|7|1C|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1D|8|@]|9|@$T|1E|U|1F|1|1G]]|A|$]]|$1|V|3|W|5|6|7|1H|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|14]]]]

<p>Here is:</p>

<ul>
<li>HTML+CSS only solution - no JavaScript needed</li>
<li>It does not require that you to know the content size in advance</li>
<li>The content stands centered on window resizing</li>
</ul>

<p>And the example:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;HTML centering&lt;/title&gt;

        &lt;style type="text/css"&gt;
        &lt;!--
        html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
        #td_wrap { vertical-align: middle; text-align: center; }
        --&gt;
        &lt;/style&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;table id="tbl_wrap"&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td id="td_wrap"&gt;
        &lt;!-- START: Anything between these wrapper comment lines will be centered --&gt;


&lt;div style="border: 1px solid black; display: inline-block;"&gt;
This content will be centered.
&lt;/div&gt;

        &lt;!-- END: Anything between these wrapper comment lines will be centered --&gt;
        &lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Take a look at the original URL for full info:
<a href="http://krustev.net/html_center_content.html" rel="noreferrer">http://krustev.net/html_center_content.html</a></p>

<p>You can do whatever you like with this code. The only condition is that any derived work must have a reference to the original author.</p>


blocks|key|337917|text|我在居中和对齐方面遇到了很多问题，直到我在一本指南中找到了Flexbox作为推荐。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|337918|A+Complete+Guide+to+Flexbox|offset|length|337919|为了方便起见，我将在这里发布一个代码片段(适用于Chrome)：|337920|<head>
++++<style+type="text/css">
++++++++html
++++++++{
++++++++++++width:+100%25;
++++++++++++height:+100%25;
++++++++}

++++++++body
++++++++{
++++++++++++display:+flex;
++++++++++++justify-content:+center;
++++++++++++align-items:+center;
++++++++}
++++</style>
</head>

<body>
++++This+is+text!
</body>|code-block|syntax|javascript|337921|有关更多详细信息，请参阅文章。|337922|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/snippets/css/a-guide-to-flexbox/^0|0|0|R|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@$D|Y|E|Z|1|10]]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>I had a lot of problems with centring and alignment until I found Flexbox as a recommendation in a guide.</p>

<p><a href="http://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">A Complete Guide to Flexbox</a></p>

<p>I'll post a snippet (that works with Chrome) here for convenience:</p>

<pre><code>&lt;head&gt;
    &lt;style type="text/css"&gt;
        html
        {
            width: 100%;
            height: 100%;
        }

        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    This is text!
&lt;/body&gt;
</code></pre>

<p>For more details, please refer to the article.</p>


blocks|key|3108288|text|你可以在视窗中居中任何对象，下面是一个使用jquery的例子|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3108289|$(document).ready(function()
{


posicionar("#midiv");
$(window).on("resize",+function()+{
++++posicionar("#midiv");+++
});

function+posicionar(elemento){
++++var+altoDocumento+=+$(window).height();//alto
++++var+anchoDocumento+=+$(window).width();
++++//console.log(altoDocumento);
++++//console.log(anchoDocumento);
++++var+centroXDocumento+=+anchoDocumento+/+2;
++++var+centroYDocumento+=+altoDocumento+/+2;
++++//console.log(centroXDocumemnto,centroYDocumento);
++++var+altoElemento+=+$(elemento).outerHeight(true);//ancho+real+del+elemento
++++var+anchoElemento+=+$(elemento).outerWidth(true);//alto+

++++var+centroXElemento+=+anchoElemento+/+2;//+centro+x+del+elemento
++++var+centroYElemento+=+altoElemento+/+2;+//+centro+y+del+elemento

++++var+posicionXElemento+=+centroXDocumento+-+centroXElemento;
++++var+posicionYElemento+=+centroYDocumento+-+centroYElemento;

++++$(elemento).css("position","absolute");
++++$(elemento).css("top",+posicionYElemento);
++++$(elemento).css("left",+posicionXElemento);
}
});|code-block|syntax|javascript|3108290|这个html|3108291|<div+id="midiv"></div>|3108292|注意:当窗口调整大小时，您必须执行函数onDomReady。|3108293|下面是de+jsfiddle+http://jsfiddle.net/geomorillo/v82x6/|offset|length|3108294|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/geomorillo/v82x6/^0|0|0|0|0|0|F|11|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>you can center any object in viewport, here is an example using jquery</p>

<pre><code>$(document).ready(function()
{


posicionar("#midiv");
$(window).on("resize", function() {
    posicionar("#midiv");   
});

function posicionar(elemento){
    var altoDocumento = $(window).height();//alto
    var anchoDocumento = $(window).width();
    //console.log(altoDocumento);
    //console.log(anchoDocumento);
    var centroXDocumento = anchoDocumento / 2;
    var centroYDocumento = altoDocumento / 2;
    //console.log(centroXDocumemnto,centroYDocumento);
    var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
    var anchoElemento = $(elemento).outerWidth(true);//alto 

    var centroXElemento = anchoElemento / 2;// centro x del elemento
    var centroYElemento = altoElemento / 2; // centro y del elemento

    var posicionXElemento = centroXDocumento - centroXElemento;
    var posicionYElemento = centroYDocumento - centroYElemento;

    $(elemento).css("position","absolute");
    $(elemento).css("top", posicionYElemento);
    $(elemento).css("left", posicionXElemento);
}
});
</code></pre>

<p>the html </p>

<pre><code>&lt;div id="midiv"&gt;&lt;/div&gt;
</code></pre>

<p>Note: you must execute the function onDomReady and when the window resizes.</p>

<p>here is de jsfiddle
<a href="http://jsfiddle.net/geomorillo/v82x6/" rel="nofollow">http://jsfiddle.net/geomorillo/v82x6/</a></p>


blocks|key|339273|text|工作解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|339274|<html>
++++++++++<head>
++++++++++++<style+type="text/css">
++++++++++++++++html
++++++++++++++++{
++++++++++++++++++++width:+100%25;
++++++++++++++++++++height:+100%25;
++++++++++++++++}

++++++++++++++++body
++++++++++++++++{
++++++++++++++++++++display:+flex;
++++++++++++++++++++justify-content:+center;
++++++++++++++++++++align-items:+center;
++++++++++++++++}
++++++++++++</style>
++++++++</head>

++++++++<body>
++++++++++++Center+aligned+text.(horizontal+and+vertical+side)
++++++++</body>
</html>|code-block|syntax|javascript|339275|entityMap^0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p><strong>Working solution.</strong></p>

<pre><code>&lt;html&gt;
          &lt;head&gt;
            &lt;style type="text/css"&gt;
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            &lt;/style&gt;
        &lt;/head&gt;

        &lt;body&gt;
            Center aligned text.(horizontal and vertical side)
        &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|342760|text|如果你不知道浏览器的大小，你可以用下面的代码把CSS放在中心位置：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|342761|HTML代码：|342762|<div+class="firstDiv">Some+Text</div>++|code-block|syntax|javascript|342763|CSS代码：|342764|+.firstDiv+{
++width:+500px;

++position:+fixed;
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,+-50%25);

++background-color:+#F1F1F1;
+}|342765|这也有助于在未来发生任何不可预见的变化。|342766|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>If you don't know the size of the browser you can simply center in CSS with the following code:</p>

<p>HTML code:</p>

<pre><code>&lt;div class="firstDiv"&gt;Some Text&lt;/div&gt;  
</code></pre>

<p>CSS code:</p>

<pre><code> .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }
</code></pre>

<p>This also helps in any unforeseen changes in the future. </p>


blocks|key|340477|text|div#wrapper+{
++++position:+absolute;
++++top:++50%25;
++++left:+50%25;
++++transform:+translate(-50%25,-50%25);
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|340478|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</code></pre>


blocks|key|339290|text|它对我是有效的:)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|339291|div.parent+{
++display:+flex;
++align-items:+center;
++justify-content:+center;
++height:+100vh;
}|code-block|syntax|javascript|339292|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It works for me :).</p>

<pre><code>div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
</code></pre>


blocks|key|339294|text|这应该适用于任何div或屏幕大小：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|339295|​|339296|.center-screen+{
++display:+flex;
++flex-direction:+column;
++justify-content:+center;
++align-items:+center;
++text-align:+center;
++min-height:+100vh;
}|code-block|syntax|javascript|339297|+<html>
+<head>
+</head>
+<body>
+<div+class="center-screen">
+I'm+in+the+center
+</div>
+</body>
+</html>|339298|339299|查看有关flex+here的更多详细信息。这应该可以在大多数浏览器上工作，请参阅兼容性矩阵here。|339300|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/a-guide-to-flexbox/|1|https://caniuse.com/#feat=flexbox^0|8|3|0|0|0|0|0|4|4|9|4|0|19|4|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]|$9|1E|A|1F|1|1G]]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>This should work with any <code>div</code> or screen size:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="center-screen"&gt;
 I'm in the center
 &lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>See more details about <code>flex</code> <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">here</a>. This should work on most of the browsers, see compatibility matrix <a href="https://caniuse.com/#feat=flexbox" rel="noreferrer">here</a>.</p>


<p>How can I place some HTML element (say, a <code>&lt;div&gt;</code>, for example) in the middle of a browser window (not page, not screen)? Not depending on browser window size, screen resolution, toolbar layout, etc. E.g. I want it to be in the middle of the <strong>browser window</strong>.</p>


How to center an element in the middle of the browser window?

如何将一些超文本标记语言元素(例如，<div> )放在浏览器窗口(不是页面，不是屏幕)的中间？不依赖于浏览器窗口大小、屏幕分辨率、工具栏布局等。例如，我希望它位于浏览器窗口的中间。

问如何在浏览器窗口中间居中放置元素？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器窗口中间居中放置元素？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在浏览器窗口中间居中放置元素？
EN