blocks|key|1701476|text|如果你给你的div一个固定的宽度，你的问题可能会解决，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1701477|div#thing+{
++++position:+absolute;
++++top:+0px;
++++z-index:+2;
++++width:400px;
++++margin-left:-200px;
++++left:50%25;
}|code-block|syntax|javascript|1701478|entityMap^0|6|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>Your problem may be solved if you give your <code>div</code> a fixed width, as follows:</p>

<pre><code>div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}
</code></pre>


blocks|key|1701495|text|是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701496|div#thing+{+text-align:center;+}|code-block|syntax|javascript|1701497|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>Yes:</p>

<pre><code>div#thing { text-align:center; }
</code></pre>


blocks|key|1486437|text|div#thing
{
++++position:+absolute;
++++width:400px;
++++right:+0;
++++left:+0;
++++margin:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1486438|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#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}
</code></pre>


blocks|key|1486507|text|如果你需要一个相对宽度(以百分比表示)，你可以把你的div包在一个绝对的位置上：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486508|div#wrapper+{
++++position:+absolute;
++++width:+100%25;
++++text-align:+center;
}|code-block|syntax|javascript|1486509|请记住，为了绝对定位一个元素，父元素必须相对定位。|1486510|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>If it is necessary for you to have a relative width (in percentage), you could wrap your div in a absolute positioned one:</p>

<pre><code>div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}
</code></pre>

<p>Remember that in order to position an element absolutely, the parent element must be positioned relatively.</p>


blocks|key|1701593|text|我也有同样的问题，我的限制是我不能有一个预定义的宽度。如果你的元素没有固定的宽度，那么试试这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701594|div#thing+
{+
++position:+absolute;+
++top:+0px;+
++z-index:+2;+
++left:0;
++right:0;
+}

div#thing-body
{
++text-align:center;
}|code-block|syntax|javascript|1701595|然后修改您的html，如下所示|1701596|<div+id="thing">
+<div+id="thing-child">
++<p>text+text+text+with+no+fixed+size,+variable+font</p>
+</div>
</div>|1701597|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 was having the same issue, and my limitation was that i cannot have a predefined width. If your element does not have a fixed width, then try this</p>

<pre><code>div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}
</code></pre>

<p>then modify your html to look like this</p>

<pre><code>&lt;div id="thing"&gt;
 &lt;div id="thing-child"&gt;
  &lt;p&gt;text text text with no fixed size, variable font&lt;/p&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|1486623|text|我知道我来晚了，但我想我应该在这里为那些需要水平放置绝对物品的人提供一个答案，当你不知道它的确切宽度时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486624|试试这个：|1486625|//+Horizontal+example.
div#thing+{
++position:+absolute;
++left:+50%25;
++transform:+translateX(-50%25);
}|code-block|syntax|javascript|1486626|当您可能需要垂直对齐时，也可以应用相同的技术，只需像这样调整属性：|1486627|//+Vertical+example.
div#thing+{
++position:+absolute;
++top:+50%25;
++transform:+translateY(-50%25);
}|1486628|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I know I'm late to the party, but I thought I would provide an answer here for people who need to horizontally position an absolute item, when you don't know its exact width.</p>

<p>Try this:</p>

<pre><code>// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</code></pre>

<p>The same technique can also be applied, for when you might need vertical alignment, simply by adjusting the properties like so:</p>

<pre><code>// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</code></pre>


blocks|key|1486659|text|要使其垂直和水平居中，请执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486660|div#thing+{
+++position:+absolute;
+++left:+50%25;
+++top:+50%25;
+++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|1486661|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 center it both vertically and horizontally do this:</p>

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


blocks|key|1701737|text|或者你可以使用相对单位，例如|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701738|#thing+{
++++position:+absolute;
++++width:+50vw;
++++right:+25vw;
}|code-block|syntax|javascript|1701739|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>Or you can use relative units, e.g.</p>

<pre><code>#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}
</code></pre>


blocks|key|1701754|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1701755|.contentBlock+{
++++width:+{define+width}
++++width:+400px;
++++position:+absolute;
++++left:+0;
++++right:+0;
++++margin-left:+auto;
++++margin-right:+auto;
+
}|code-block|syntax|javascript|1701756|1701757|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<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>.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}</code></pre>
</div>
</div>
</p>


<pre><code>div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

&lt;div id="thing"&gt;
   &lt;p&gt;text text text with no fixed size, variable font&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>The div is at the top, but I can't center it with <code>&lt;center&gt;</code> or <code>margin: 0 auto</code>;</p>


Center Align on a Absolutely Positioned Div

div#thing {  position: absolute;  top: 0px;  z-index: 2;  margin: 0 auto;}<div id="thing">   <p>text text text with no fixed size, variable font</p></div>div在顶部...

问在绝对定位的分段上居中对齐
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在绝对定位的分段上居中对齐EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在绝对定位的分段上居中对齐
EN