blocks|key|1578284|text|CSS属性top的工作方式与left完全相同。它从那个方向推送div。当您编写top:50%25时，div将从顶部向下推50%25。你想让它垂直居中，所以你需要通过把它拉回来来解决这个问题。这可以使用margin-top:+-300px来完成，就像您使用margin-left:+-600px向左拉它一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1578285|position:+absolute;
width:+1200px;
height:+600px;
top:+50%25;
margin-top:+-300px;
left:+50%25;
margin-left:+-600px;|code-block|syntax|javascript|1578286|entityMap^0|5|3|E|4|13|7|1C|3|2O|I|3F|J|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|L|$]]

<p>The CSS property <code>top</code> works exactly as <code>left</code>. It <em>pushes</em> the div from that direction. When you write <code>top:50%</code>, the <code>div</code> will be pushed down 50% from the top. You want it to be centered vertically, so you need to counter this by <em>pulling it back up</em>. This can be done using <code>margin-top: -300px</code> just like you used <code>margin-left: -600px</code> to <em>pull it left</em>.</p>

<pre><code>position: absolute;
width: 1200px;
height: 600px;
top: 50%;
margin-top: -300px;
left: 50%;
margin-left: -600px;
</code></pre>


blocks|key|1578288|text|top:50%25;运行良好，但不会将项目“居中”，它会将页面高度的50%25放在顶部的顶部边缘。与使用margin-left:-600px;类似，您还应该添加margin-top:-300px;|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1578289|entityMap^0|0|8|1C|J|24|I|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p><code>top:50%;</code> works fine, but wont "center" the item, it will place it's top edge 50% of the page's height from the top. Similarly to how you have <code>margin-left:-600px;</code> you should also add <code>margin-top:-300px;</code></p>


blocks|key|1578307|text|我相信这可能在某种程度上模仿了Kristian给出的答案，但这里是我的两个观点，其中包括使用百分比，并在另一个内部演示了一个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1578308|#parent+{
++++position:+absolute;
++++top:+50%25;
++++left:+50%25;
++++width:+120px;
++++height:+60px;
++++margin:+-60px+0+0+-30px;
++++background:+blue;
}
#center+{
++++position:+absolute;
++++width:+50%25;
++++height:+50%25;
++++top:+50%25;
++++left:+50%25;
++++margin:+-12.5%25+0+0+-25%25;
++++background:+green;
}|code-block|syntax|javascript|1578309|http://jsfiddle.net/userdude/MYD27/|offset|length|1578310|编辑|style|BOLD|1578311|进一步看，我认为如果你试图在定位的元素中使用元素而不是容器，你可能会遇到问题。例如：|1578312|+%7C+|1578313|我不认为是你想要的那样工作。当我添加position:+relative+(或者position:+absolute)时，我认为它可以按照您的意图工作：|CODE|1578314|+%7C+|1578315|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|Z|0|0|0|2|0|0|1|1|0|I|I|14|I|0|1|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@$I|17|J|18|1|19]]|A|$]]|$1|K|3|L|5|6|7|1A|8|@$I|1B|J|1C|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1E|8|@$I|1F|J|1G|M|N]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1H|8|@$I|1I|J|1J|M|U]|$I|1K|J|1L|M|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1M|8|@$I|1N|J|1O|M|N]]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Y|$Z|$5|10|11|12|A|$13|H]]]]

<p>I believe this may somewhat mimic the answer Kristian gave, but here's my two cents, which includes using percentages and also demonstrates one inside another:</p>

<pre><code>#parent {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 60px;
    margin: -60px 0 0 -30px;
    background: blue;
}
#center {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 50%;
    left: 50%;
    margin: -12.5% 0 0 -25%;
    background: green;
}
</code></pre>

<p><a href="http://jsfiddle.net/userdude/MYD27/" rel="nofollow">http://jsfiddle.net/userdude/MYD27/</a></p>

<p><strong>EDIT</strong></p>

<p>Looking at it further, I think you might run into issues if you're trying to do this with an element not container within a positioned element. For instance:</p>

<p><strong><a href="http://jsfiddle.net/userdude/MYD27/9/embedded/result/" rel="nofollow">Full View</a> | <a href="http://jsfiddle.net/userdude/MYD27/9/" rel="nofollow">Code View</a></strong></p>

<p>I don't think works the way you intended. When I add <code>position: relative</code> (or alternatively <code>position: absolute</code>), it does work I think as you intended:</p>

<p><strong><a href="http://jsfiddle.net/userdude/MYD27/9/embedded/result/" rel="nofollow">Full View</a> | <a href="http://jsfiddle.net/userdude/MYD27/9/" rel="nofollow">Code View</a></strong></p>


blocks|key|4032595|text|我想借此机会明目张胆地自我推销my+answer+to+another+question+here+on+SO+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4032596|也就是说，css+"top“属性会根据容器元素的高度正确计算--有效地将目标元素呈现在中线以下。这意味着需要将元素向上推到一半，如链接的问题中所述。|4032597|不幸的是，如果不使用基于像素的绝对值(+Kristian+Antonsen的答案是%2B1)，就不能通过调整上边距等来完成这样一个看似简单的任务？？可以想象，将边距-顶部设置为"-50%25“就意味着这一点，但根据css规范，即使在垂直轴上的边距值也是以a+percentage+always+relative+to+the+width+of+the+containing+block计算的。|style|BOLD|4032598|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen/9758556#9758556|1|https://developer.mozilla.org/en/CSS/margin-top^0|F|14|0|0|0|K|H|3F|1T|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Y|8|@$A|Z|B|10|H|I]]|9|@$A|11|B|12|1|13]]|C|$]]|$1|J|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]|R|$5|M|N|O|C|$P|S]]]]

<p>I'd like to take this opportunity to blatantly self-promote <a href="https://stackoverflow.com/questions/210717/using-jquery-to-center-a-div-on-the-screen/9758556#9758556">my answer to another question here on SO</a> :)</p>

<p>That being said, css "top" property gets correctly calculated based on the container element's height - effectively rendering the target element below the midline. What this means is the element needs to be pushed half-way up as explained in the linked question.</p>

<p>Unfortunately such a seemingly straightforward task cannot be accomplished by adjusting top margin etc. without using absolute pixel-based values (+1 for <strong>Kristian Antonsen</strong>'s answer) - one would imagine setting margin-top to "-50%" would mean just that, but according to css spec, margin values even on the vertical axis are calculated as <a href="https://developer.mozilla.org/en/CSS/margin-top" rel="nofollow noreferrer">a percentage always relative to the width of the containing block</a></p>


blocks|key|1921986|text|您可以使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1921987|calc(%2550+-+(items_height/2));|code-block|syntax|javascript|1921988|到中点。|1921989|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can use </p>

<pre><code>calc(%50 - (items_height/2));
</code></pre>

<p>to center. </p>


blocks|key|1922000|text|使用所需的位置静态高度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1922001|​|1922002|i{
++-webkit-transform:+translate(-50%25,-50%25);
++transform:+translate(-50%25,-50%25);
++position:+absolute;
++top:+50%25;
++left:+50%25;
}|code-block|syntax|javascript|1922003|<i>center</i>|1922004|1922005|编辑:使用Flex+(2021-10-19)|1922006|1922007|i+{
++display:+flex;
++align-items:+center;+/*+vertical+centering+if+flex-direction:+row+*/
++justify-content:+center;+/*+horizontal+centering+if+flex-direction:+row+*/

++/*+extra+styles+*/
++background-color:+limeGreen;
++min-height:+160px;
}|1922008|1922009|1922010|enter+code+here|1922011|entityMap^0|0|0|0|0|0|0|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|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|11|8|@]|9|@]|A|$]]|$1|N|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|13|8|@]|9|@]|A|$G|H]]|$1|Q|3|J|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|R|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|16|8|@]|9|@]|A|$G|H]]|$1|U|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|V|$]]

<h2>Using Position - Static height needed</h2>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>i{
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top: 50%;
  left: 50%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;i&gt;center&lt;/i&gt;</code></pre>
</div>
</div>
</p>
<h2>Edit: Using Flex (2021-10-19)</h2>
<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>i {
  display: flex;
  align-items: center; /* vertical centering if flex-direction: row */
  justify-content: center; /* horizontal centering if flex-direction: row */

  /* extra styles */
  background-color: limeGreen;
  min-height: 160px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;i&gt;center&lt;/i&gt;</code></pre>
</div>
</div>
</p>
<pre><code>enter code here
</code></pre>


blocks|key|1922030|text|要回答为什么top:+50%25不工作的问题，当您在元素上使用属性top时，该元素的父级需要在适当的位置设置静态高度。此值应为px或百分比以外的单位。如果您真的需要在父对象中使用百分比，那么可以继续使用下一个父对象(即该父对象的父对象)，并使该父对象具有固定的静态高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1922031|使任何东西垂直居中。I+prefer+to+use+this+method|1922032|使用CSS+transform，因为你不需要知道你的元素有多宽。|1922033|position:+relative;
top:+50%25;
left:+50%25;
-webkit-transform:+translate(-50%25,+-50%25);
-moz-transform:+translate(-50%25,+-50%25);
-ms-transform:+translate(-50%25,+-50%25);
-o-transform:+translate(-50%25,+-50%25);
transform:+translate(-50%25,+-50%25);|code-block|syntax|javascript|1922034|1922035|不要忘记添加浏览器/供应商前缀。|blockquote|1922036|1922037|1922038|You+can+refer+here+for+vendor+prefixes.|1922039|1922040|如果你不知道你父母的身高。您有两个选择：|1922041|使用JavaScript的|1922042|获取父元素的自然高度，然后将该父元素的height属性设置为您刚刚获取的值。如果父元素的高度是由与要居中的元素同级的另一个子元素引起的，则可以使用此方法。|ordered-list-item|1922043|1922044|​|1922045|$('.parent').height(+$(this).height()+);|1922046|.parent+{
++/*+Unkown+height+*/
}

.child+{
++/*+Create+columns+*/
++width:+50%25;
++float:+left;
}

.child-1+{
++position:+relative;
++top:+50%25;
++text-align:+center;
++-webkit-transform:+translateY(-50%25);
++-moz-transform:+translateY(-50%25);
++-ms-transform:+translateY(-50%25);
++-o-transform:+translateY(-50%25);
++transform:+translateY(-50%25);
}|1922047|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div+class="parent">
++<div+class="child+child-1">
++++Lorem+ipsum
++</div>++
++<div+class="child+child-2">
++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.
++</div>
</div>|1922048|1922049|提示:如果你考虑到响应性，只需在浏览器调整大小时在JavaScript中再次设置高度即可。您可以通过在JavaScript中将height设置为auto来获得新的自然高度，然后再次执行此过程。|1922050|1922051|你可以划掉上面的想法，改为使用display:+table居中。CSS-Tricks+has+a+very+good+example+here.|1922052|1922053|entityMap|0|LINK|mutability|MUTABLE|url|http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/|1|https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix|2|https://css-tricks.com/centering-in-the-unknown/^0|6|8|V|3|1P|2|0|A|R|0|0|6|9|0|0|0|0|0|0|0|13|1|0|0|0|0|0|0|0|0|0|0|0|0|0|F|E|W|13|2|0|0^^$0|@$1|2|3|4|5|6|7|1W|8|@$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]|$9|21|A|22|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|23|8|@]|D|@$9|24|A|25|1|26]]|E|$]]|$1|H|3|I|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|2A|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|2C|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|2D|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|2F|8|@]|D|@$9|2G|A|2H|1|2I]]|E|$]]|$1|W|3|-4|5|6|7|2J|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2K|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2L|8|@]|D|@]|E|$]]|$1|11|3|12|5|13|7|2M|8|@]|D|@]|E|$]]|$1|14|3|-4|5|6|7|2N|8|@]|D|@]|E|$]]|$1|15|3|16|5|6|7|2O|8|@]|D|@]|E|$]]|$1|17|3|18|5|L|7|2P|8|@]|D|@]|E|$M|N]]|$1|19|3|1A|5|L|7|2Q|8|@]|D|@]|E|$M|N]]|$1|1B|3|1C|5|L|7|2R|8|@]|D|@]|E|$M|N]]|$1|1D|3|16|5|6|7|2S|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|6|7|2T|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|2U|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|13|7|2V|8|@$9|2W|A|2X|B|C]]|D|@$9|2Y|A|2Z|1|30]]|E|$]]|$1|1J|3|-4|5|6|7|31|8|@]|D|@]|E|$]]|$1|1K|3|-4|5|6|7|32|8|@]|D|@]|E|$]]]|1L|$1M|$5|1N|1O|1P|E|$1Q|1R]]|1S|$5|1N|1O|1P|E|$1Q|1T]]|1U|$5|1N|1O|1P|E|$1Q|1V]]]]

<p>To answer your question why <code>top: 50%</code> is not working, when you use property <code>top</code> on an element, the parent of that element needs to have a static height set in place. This should be in <code>px</code> or a unit other than percent. If you really need to use percent in your parent as well, then you can move on to the next parent (which is the parent of that parent) and have that one a fixed static height.</p>

<p>To vertically centering anything. <a href="http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/" rel="noreferrer">I prefer to use this method</a></p>

<p>The use of CSS <code>transform</code> since you don't have to know what the width of height your element has.</p>

<pre><code>position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
</code></pre>

<blockquote>
  <p>Don't forget to add browser/vendor prefixes.</p>
</blockquote>

<p><a href="https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix" rel="noreferrer">You can refer here for vendor prefixes.</a></p>

<hr>

<p>If you don't know the height of your parent.
You have two options:</p>

<ol>
<li>Using JavaScript take the natural height of the parent element and then set the height property of that parent element to the value you just took. You can use this method when the height of the parent element is caused by another child element that is sibling to the element you are centering.</li>
</ol>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.parent').height( $(this).height() );</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
  /* Unkown height */
}

.child {
  /* Create columns */
  width: 50%;
  float: left;
}

.child-1 {
  position: relative;
  top: 50%;
  text-align: center;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;!-- Example Start --&gt;
&lt;div class="parent"&gt;
  &lt;div class="child child-1"&gt;
    Lorem ipsum
  &lt;/div&gt;  
  &lt;div class="child child-2"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Tip: If you are taking responsive into concern, just set height again in JavaScript on browser resize. You can get the new natural height by setting height to auto in JavaScript and do the process again.</p>

<ol start="2">
<li>You can scratch the ideas above and use centering with <code>display: table</code> instead. <a href="https://css-tricks.com/centering-in-the-unknown/" rel="noreferrer">CSS-Tricks has a very good example here</a>.</li>
</ol>


<p>I am making a website and I'm trying to vertically center:</p>

<pre><code> position: absolute;
 width:1200px;
 height:600px;
 top: 50%;
 left: 50%;
 margin-left: -600px;
</code></pre>

<p>and my HTML is a single <code>div</code></p>


Why is is top:50% in css not working?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在做一个网站，我试着垂直居中： position: absolute; width:1200px; height:600px; top: 50%; left: 50%; margin-left: -600px;我的超文本标记语言是一个单一的div

问为什么css中的top:50%不起作用？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么css中的top:50%不起作用？EN