blocks|key|236490|text|如果你有一个固定的宽度和高度，最简单的方法是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|236491|#divElement{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++margin-top:+-50px;
++++margin-left:+-50px;
++++width:+100px;
++++height:+100px;
}​|code-block|syntax|javascript|236492|请不要使用内联样式！这是一个有效的http://jsfiddle.net/S5bKq/示例。|offset|length|236493|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/S5bKq/^0|0|0|H|Q|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>The easy way, if you have a fixed width and height:</p>

<pre><code>#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​
</code></pre>

<p>Please don't use inline styles! Here is a working example <a href="http://jsfiddle.net/S5bKq/">http://jsfiddle.net/S5bKq/</a>.</p>


blocks|key|2896176|text|如果你有一个固定的div，只需将其绝对定位在距顶部50%25的位置，左侧和负边距分别为高度和宽度的一半的顶部和左侧。根据您的需求进行调整：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2896177|div+{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++width:+500px;
++++height:+300px;
++++margin-left:+-250px;
++++margin-top:+-150px;
}|code-block|syntax|javascript|2896178|entityMap^0|9|3|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>If you have a fixed <code>div</code> just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively. Adjust to your needs:</p>

<pre><code>div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
</code></pre>


blocks|key|3110189|text|设置宽度和高度，就可以了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3110190|div+{
++position:+absolute;
++margin:+auto;
++top:+0;
++right:+0;
++bottom:+0;
++left:+0;
++width:+200px;
++height:+200px;
}|code-block|syntax|javascript|3110191|如果您希望元素尺寸灵活(并且不关心遗留浏览器)，请使用XwipeoutX的答案。|offset|length|style|BOLD|3110192|entityMap^0|0|0|R|9|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Set the width and height and you're good.</p>

<pre><code>div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}
</code></pre>

<p>If you want the element dimensions to be flexible (and don't care about legacy browsers), go with <strong>XwipeoutX</strong>'s answer.</p>


blocks|key|234888|text|随着现在对转换的支持越来越普遍，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234889|.popup+{
++++position:+fixed;
++++top:+50%25;
++++left:+50%25;
++++-webkit-transform:+translate(-50%25,+-50%25);
++++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|234890|简单！JSFiddle地址：http://jsfiddle.net/LgSZV/|offset|length|234891|CSS更新：请访问https://css-tricks.com/centering-css-complete-guide/，获取有关居中的详尽指南。将它添加到这个答案中，因为它似乎获得了很多眼球。|style|BOLD|234892|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/LgSZV/|1|https://css-tricks.com/centering-css-complete-guide/^0|0|0|E|Q|0|0|1U|W|9|1G|1|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|@$I|11|J|12|1|13]]|A|$]]|$1|K|3|L|5|6|7|14|8|@$I|15|J|16|M|N]]|9|@$I|17|J|18|1|19]]|A|$]]|$1|O|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup</p>

<pre><code>.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</code></pre>

<p>Easy! JSFiddle here: <a href="http://jsfiddle.net/LgSZV/">http://jsfiddle.net/LgSZV/</a></p>

<p><strong>Update:</strong> Check out <a href="https://css-tricks.com/centering-css-complete-guide/">https://css-tricks.com/centering-css-complete-guide/</a> for a fairly exhaustive guide on CSS centering.  Adding it to this answer as it seems to get a lot of eyeballs.</p>


blocks|key|233940|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233941|width:360px;
height:360px;
top:+50%25;+left:+50%25;
margin-top:+-160px;+/*+(+(+width+/+2+)+*+-1+)+*/
margin-left:+-160px;+/*+(+(+height+/+2+)+*+-1+)+*/
position:absolute;|code-block|syntax|javascript|233942|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>try this:</p>

<pre><code>width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
</code></pre>


blocks|key|2896230|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2896231|<table+style="height:+100%25;+left:+0;+position:+absolute;+text-align:+center;+width:+100%25;">
+<tr>
++<td>
+++<div+style="text-align:+left;+display:+inline-block;">
++++Your+Html+code+Here
+++</div>
++</td>
+</tr>
</table>|code-block|syntax|javascript|2896232|或者这个|2896233|<div+style="height:+100%25;+left:+0;+position:+absolute;+text-align:+center;+width:+100%25;+display:+table">
+<div+style="display:+table-row">
++<div+style="display:+table-cell;+vertical-align:middle;">
+++<div+style="text-align:+left;+display:+inline-block;">
++++Your+Html+code+here
+++</div>
++</div>
+</div>
</div>|2896234|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>try this</p>

<pre><code>&lt;table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;"&gt;
 &lt;tr&gt;
  &lt;td&gt;
   &lt;div style="text-align: left; display: inline-block;"&gt;
    Your Html code Here
   &lt;/div&gt;
  &lt;/td&gt;
 &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Or this</p>

<pre><code>&lt;div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table"&gt;
 &lt;div style="display: table-row"&gt;
  &lt;div style="display: table-cell; vertical-align:middle;"&gt;
   &lt;div style="text-align: left; display: inline-block;"&gt;
    Your Html code here
   &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2896236|text|现在，使用HTML+5和CSS+3更容易：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2896237|<!DOCTYPE+html>
<html>
++++<head>
++++++++<title>TODO+supply+a+title</title>
++++++++<meta+charset="UTF-8">
++++++++<meta+name="viewport"+content="width=device-width,+initial-scale=1.0">
++++++++<style>
++++++++++++body+>+div+{
++++++++++++++++position:+absolute;
++++++++++++++++top:+0;
++++++++++++++++bottom:+0;
++++++++++++++++left:+0;
++++++++++++++++right:+0;

++++++++++++++++display:+flex;
++++++++++++++++flex-wrap:+wrap;
++++++++++++++++align-items:+center;
++++++++++++++++justify-content:+center;
++++++++++++}
++++++++</style>
++++</head>
++++<body>
++++++++<div>
++++++++++++<div>TODO+write+content</div>
++++++++</div>
++++</body>
</html>|code-block|syntax|javascript|2896238|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>Now, is more easy with HTML 5 and CSS 3:</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;TODO supply a title&lt;/title&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
        &lt;style&gt;
            body &gt; div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div&gt;
            &lt;div&gt;TODO write content&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|231066|text|如果有人在寻找解决方案，|type|unstyled|depth|inlineStyleRanges|entityRanges|data|231067|我发现了这个|231068|这是我找到的最好的解决方案！|231069|div+{
++width:+100px;
++height:+100px;
++background-color:+red;
++position:+absolute;
++top:0;
++bottom:+0;
++left:+0;
++right:+0;
++margin:+auto;
}|code-block|syntax|javascript|231070|http://dabblet.com/gist/2872671|offset|length|231071|希望你喜欢！|231072|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|V|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Z|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|10|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|9|@$M|12|N|13|1|14]]|A|$]]|$1|O|3|P|5|6|7|15|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|L]]]]

<p>If there are anyone looking for a solution,</p>

<p>I found this,</p>

<p>Its the best solution i found yet!</p>

<pre><code>div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</code></pre>

<p><a href="http://dabblet.com/gist/2872671" rel="nofollow">http://dabblet.com/gist/2872671</a></p>

<p>Hope you enjoy!</p>


blocks|key|3110274|text|另一种在中心显示块的简单灵活的方法是:在line-height和text-align中使用原生文本对齐。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3110275|解决方案：|3110276|.parent+{
++++line-height:+100vh;++++++++
++++text-align:+center;
}

.child+{
++++display:+inline-block;
++++vertical-align:+middle;
++++line-height:+100%25;
}|code-block|syntax|javascript|3110277|和html示例：|3110278|<div+class="parent">
++<div+class="child">My+center+block</div>
</div>|3110279|我们让div.parent全屏显示，他的单个子div.child作为文本与display:+inline-block对齐。|3110280|优势：|3110281|3110282|灵活性，无需绝对调整大小|unordered-list-item|3110283|在移动|3110284|上运行良好|3110285|JSFiddle上的简单示例：https://jsfiddle.net/k9u6ma8g|3110286|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/k9u6ma8g^0|K|B|W|A|0|0|0|0|0|3|A|N|9|11|L|0|0|0|0|0|0|F|T|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1H|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1K|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1L|8|@$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1S|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]|$1|V|3|W|5|X|7|1U|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|X|7|1V|8|@]|D|@]|E|$]]|$1|10|3|11|5|6|7|1W|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|1X|8|@]|D|@$9|1Y|A|1Z|1|20]]|E|$]]|$1|14|3|-4|5|6|7|21|8|@]|D|@]|E|$]]]|15|$16|$5|17|18|19|E|$1A|1B]]]]

<p>Another easy flexible approach to display block at center: using native text alignment with <code>line-height</code> and <code>text-align</code>.</p>

<p>Solution:</p>

<pre><code>.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}
</code></pre>

<p>And html sample:</p>

<pre><code>&lt;div class="parent"&gt;
  &lt;div class="child"&gt;My center block&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>We make <code>div.parent</code> fullscreen, and his single child <code>div.child</code> align as text with <code>display: inline-block</code>.</p>

<p>Advantages:</p>

<ul>
<li>flexebility, no absolute values</li>
<li>support resize</li>
<li>works fine on mobile</li>
</ul>

<p>Simple example on JSFiddle: <a href="https://jsfiddle.net/k9u6ma8g" rel="nofollow">https://jsfiddle.net/k9u6ma8g</a></p>


blocks|key|233958|text|它适用于任何对象。即使你不知道大小：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|233959|.centered+{
++position:+fixed;
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|233960|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 will work for any object. Even if you don't know the size:</p>

<pre><code>.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</code></pre>


blocks|key|3110313|text|我会在CSS中这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3110314|div.centered+{
++position:+fixed;+
++top:+50%25;
++left:+50%25;
++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|3110315|然后在HTML中：|3110316|<div+class="centered"></div>|3110317|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I would do this in CSS:</p>

<pre><code>div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</code></pre>

<p>then in HTML:</p>

<pre><code>&lt;div class="centered"&gt;&lt;/div&gt;
</code></pre>


blocks|key|2896324|text|使用flex。简单得多，无论您的div大小如何，都可以正常工作：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2896325|​|2896326|.center-screen+{
++display:+flex;
++flex-direction:+column;
++justify-content:+center;
++align-items:+center;
++text-align:+center;
++min-height:+100vh;
}|code-block|syntax|javascript|2896327|+<html>
+<head>
+</head>
+<body>
+<div+class="center-screen">
+I'm+in+the+center
+</div>
+</body>
+</html>|2896328|2896329|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/snippets/css/a-guide-to-flexbox/^0|G|3|2|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">flex</a>. Much simpler and will work regardless of your <code>div</code> 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>


blocks|key|234976|text|不使用绝对位置的替代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|234977|我看到了很多立场的绝对答案。我不能在不破坏其他东西的情况下使用位置绝对。因此，对于那些无法做到这一点的人，我是这么做的：|234978|https://stackoverflow.com/a/58622840/6546317+(为回答另一个问题而发布)。|offset|length|234979|该解决方案只关注垂直居中，因为我的子元素已经水平居中，但如果您不能以另一种方式水平居中，也可以应用相同的方法。|234980|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/58622840/6546317^0|0|0|0|18|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>Alternative solution that doesn't use position absolute:<br>
I see a lot of position absolute answers. I couldn't use position absolute without breaking something else. So for those that couldn't as well, here is what I did:<br>
<a href="https://stackoverflow.com/a/58622840/6546317">https://stackoverflow.com/a/58622840/6546317</a> (posted in response to another question).</p>

<p>The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.</p>


blocks|key|234987|text|现在，您可以使用更少的代码行使用grid+layout来完成此任务。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|234988|​|234989|.center-this{
++display:+grid;
++place-items:+center;
++align-content:+center;
}|code-block|syntax|javascript|234990|<div+class="center-this">
++<div>
++++Hello
++</div>
</div>|234991|234992|entityMap^0|G|4|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>Now you can do this using <code>grid</code> layout with fewer lines of code.</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-this{
  display: grid;
  place-items: center;
  align-content: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="center-this"&gt;
  &lt;div&gt;
    Hello
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I want to position a <code>&lt;div&gt;</code> (or a <code>&lt;table&gt;</code>) element at the center of the screen irrespective of screen size. In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal. I would like to accomplish this with only CSS.</p>

<p>I have tried the following but it is not working:</p>

<pre><code> &lt;body&gt;
  &lt;div style="top:0px; border:1px solid red;"&gt;
    &lt;table border="1" align="center"&gt;
     &lt;tr height="100%"&gt;
      &lt;td height="100%" width="100%" valign="middle" align="center"&gt;
        We are launching soon!
      &lt;/td&gt;
     &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
 &lt;/body&gt;
</code></pre>

<p><strong>Note:</strong><br>
It is either way fine if the <code>&lt;div&gt;</code> element (or <code>&lt;table&gt;</code>) scrolls with the website or not. Just want it to be centered when the page loads. </p>


Positioning <div> element at center of screen

我想在屏幕中央放置一个<div> (或<table>)元素，而不考虑屏幕的大小。换句话说，“顶部”和“底部”的左边的空间应该相等，“右边”和“左边”的左边的空间应该相等。我只想用CSS来实现这一点。我尝试了以下方法，但不起作用： <body>  <div style="top:0px; border:1px solid...

问将<div>元素定位在屏幕中心
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将<div>元素定位在屏幕中心EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将<div>元素定位在屏幕中心
EN