blocks|key|3757407|text|如果您设置了宽度，则可以使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3757408|position:+absolute;
margin-left:+auto;
margin-right:+auto;
left:+0;
right:+0;
text-align:+center;|code-block|syntax|javascript|3757409|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>If you have set a width you may use:</p>
<pre class="lang-css prettyprint-override"><code>position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
</code></pre>


blocks|key|1646256|text|在CSS中，将absolutely定位的内容居中相当复杂。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1646257|ul#slideshow+li+{
++++position:+absolute;
++++left:50%25;
++++margin-left:-20px;

}|code-block|syntax|javascript|1646258|将margin-left更改为试图居中的元素宽度的一半(负数)。|1646259|entityMap^0|7|8|0|0|1|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>Centering something <code>absolute</code>ly positioned is rather convoluted in CSS.</p>

<pre class="lang-css prettyprint-override"><code>ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}
</code></pre>

<p>Change <code>margin-left</code> to (negative) half the width of the element you are trying to center.</p>


blocks|key|1446852|text|垂直和水平对齐中心的分割|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1446853|top:+0;
bottom:+0;
margin:+auto;
position:+absolute;
left:+0;
right:+0;|code-block|syntax|javascript|1446854|注意:要设置元素的宽度和高度|1446855|entityMap^0|A|2|0|0|0|E|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p><strong>Div vertically and horizontally aligned center</strong> </p>

<pre><code>top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
</code></pre>

<p>Note : Elements should have width and height to be set</p>


blocks|key|1446789|text|一个简单的CSS技巧，只需添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446790|width:+100%25;
text-align:+center;|code-block|syntax|javascript|1446791|这对图像和文本都有效。|1446792|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>A simple CSS trick, just add:</p>

<pre><code>width: 100%;
text-align: center;
</code></pre>

<p>This works on both images and text.</p>


blocks|key|1446914|text|如果要使绝对元素居中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446915|#div+{
++++position:absolute;
++++top:0;
++++bottom:0;
++++left:0;
++++right:0;
++++width:300px;+/*+Assign+a+value+*/
++++height:500px;+/*+Assign+a+value+*/
++++margin:auto;
}|code-block|syntax|javascript|1446916|如果希望容器从左到右居中，而不是从上到下居中|1446917|#div+{
++++position:absolute;
++++left:0;
++++right:0;
++++width:300px;+/*+Assign+a+value+*/
++++height:500px;+/*+Assign+a+value+*/
++++margin:auto;
}|1446918|如果希望容器从上到下居中，而不考虑从左到右|1446919|#div+{
++++position:absolute;
++++top:0;
++++bottom:0;
++++width:300px;+/*+Assign+a+value+*/
++++height:500px;+/*+Assign+a+value+*/
++++margin:auto;
}|1446920|截至2015年12月15日的更新|offset|length|style|BOLD|1446921|几个月前，我学到了另一个新技巧。假设你有一个相对的父元素。|1446922|这是你的绝对元素。|1446923|.absolute-element+{+
++++position:absolute;+
++++top:50%25;+
++++left:50%25;+
++++transform:translate(-50%25,+-50%25);+
++++width:50%25;+/*+You+can+specify+ANY+width+values+here+*/+
}|1446924|有了这个，我认为这是一个比我的旧解决方案更好的答案。因为您不必指定宽度和高度。这一次，它调整了元素本身的内容。|1446925|截至2021年4月23日的更新|1446926|它没有回答OP关于绝对位置的问题，但是如果你想要替代的解决方案，有一个叫做flexbox的解决方案。下面是一个例子。|CODE|1446927|#parent+{
++++display:flex;
++++align-items:center;
++++justify-content:center;
}|1446928|它所做的是将容器转换为flex，并使用justify-content:center将子项对齐到水平居中，使用align-items:center将子项对齐。它也支持现代浏览器，所以使用起来很安全。|1446929|不过，请务必先阅读flexbox是如何工作的。|1446930|https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox|1446931|Flexbox支持的浏览器|1446932|https://caniuse.com/flexbox|1446933|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|E|2|0|0|0|0|0|D|2|0|11|7|0|0|B|4|J|M|1I|I|0|0|0|1X|0|0|0|0|R|1|0^^$0|@$1|2|3|4|5|6|7|1R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1T|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1U|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1V|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|1W|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|1X|8|@$Q|1Y|R|1Z|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|20|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|21|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|D|7|22|8|@]|9|@]|A|$E|F]]|$1|10|3|11|5|6|7|23|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|24|8|@$Q|25|R|26|S|T]]|9|@]|A|$]]|$1|14|3|15|5|6|7|27|8|@$Q|28|R|29|S|16]]|9|@]|A|$]]|$1|17|3|18|5|D|7|2A|8|@]|9|@]|A|$E|F]]|$1|19|3|1A|5|6|7|2B|8|@$Q|2C|R|2D|S|16]|$Q|2E|R|2F|S|16]|$Q|2G|R|2H|S|16]]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|2J|8|@]|9|@$Q|2K|R|2L|1|2M]]|A|$]]|$1|1F|3|1G|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2O|8|@]|9|@$Q|2P|R|2Q|1|2R]]|A|$]]|$1|1J|3|-4|5|6|7|2S|8|@]|9|@]|A|$]]]|1K|$1L|$5|1M|1N|1O|A|$1P|1E]]|1Q|$5|1M|1N|1O|A|$1P|1I]]]]

<p>If you want to center an absolute element</p>
<pre class="lang-css prettyprint-override"><code>#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}
</code></pre>
<p>If you want a container to be centered left to right, but not with top to bottom</p>
<pre class="lang-css prettyprint-override"><code>#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}
</code></pre>
<p>If you want a container to be centered top to bottom, regardless of being left to right</p>
<pre class="lang-css prettyprint-override"><code>#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}
</code></pre>
<p><strong>Update as of December 15, 2015</strong></p>
<p>Well I learnt this another new trick few months ago. Assuming that you have a relative parent element.</p>
<p>Here goes your absolute element.</p>
<pre class="lang-css prettyprint-override"><code>.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}
</code></pre>
<p>With this, I think it's a better answer than my old solution. Since you don't have to specify width AND height. This one it adapts the content of the element itself.</p>
<p><strong>Update as of April 23, 2021</strong></p>
<p>It does not answer to OP's question about position absolute, but if you want alternative solution, there's this called <code>flexbox</code>. Here's an example.</p>
<pre class="lang-css prettyprint-override"><code>#parent {
    display:flex;
    align-items:center;
    justify-content:center;
}
</code></pre>
<p>What it does is the container is converted to <code>flex</code> and to align child items to center on horizontal is by using <code>justify-content:center</code> and vertical is to use <code>align-items:center</code>. It does support modern browsers too, so it's safe to use.</p>
<p>Though, be sure to read how flexbox work first.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox</a></p>
<p>Flexbox supported browsers</p>
<p><a href="https://caniuse.com/flexbox" rel="noreferrer">https://caniuse.com/flexbox</a></p>


blocks|key|5176043|text|将“position:absolute”元素居中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5176044|.your-element+{
++position:+absolute;
++left:+0;
++right:+0;
++text-align:+center;+//+or+this+->++margin:+0+auto;
}|code-block|syntax|javascript|5176045|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 a “position: absolute” element.</p>

<pre><code>.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this -&gt;  margin: 0 auto;
}
</code></pre>


blocks|key|3757873|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3757874|position:+absolute;
left:+50%25;
transform:+translateX(-50%25);|code-block|syntax|javascript|3757875|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 worked for me:</p>

<pre><code>position: absolute;
left: 50%;
transform: translateX(-50%);
</code></pre>


blocks|key|3757284|text|要使position:absolute属性居中，您需要设置left:50%25的div宽度和-50%25的left-left。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3757285|
<style>
div.center{
+width:200px;
+left:50%25;
+margin-left:-100px;
+position:absolute;
}
</style>


<body>
+<div+class='center'>
++should+be+centered+horizontaly
+</div>
</body>|code-block|syntax|javascript|3757286|对于垂直中心绝对，你需要做同样的事情，巴德，而不是左边，只是顶部。(注意:+html和body必须有100%25的最小高度；)|3757287|
<style>
+body,html{
++min-height:100%25;
+}
+div.center{
++height:200px;
++top:50%25;
++margin-top:-100px;
++position:absolute;
+}
</style>

<body>
+<div+class='center'>
++should+be+centered+verticaly
+</div>
</body>|3757288|，并且可以为这两者组合使用。|3757289|+++
+<style>
+body,html{
++min-height:100%25;
+}
+div.center{
++width:200px;
++height:50px
++left:50%25;
++top:50%25;
++margin-left:-100px;
++margin-top:-25px;
++position:absolute;
+}
</style>


<body>
+<div+class='center'>
++should+be+centered
+</div>
</body>|3757290|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|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>to center a a position:absolute attribute you need to set left:50% and margin-left: -50% of the width of the div.</p>

<pre><code>&lt;!-- for horizontal --&gt;
&lt;style&gt;
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
&lt;/style&gt;


&lt;body&gt;
 &lt;div class='center'&gt;
  should be centered horizontaly
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>for vertical center absolute you need to do the same thing bud not with left just with top.
( NOTE: html and body must have min-height 100%; )</p>

<pre><code>&lt;!-- for vertical --&gt;
&lt;style&gt;
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
&lt;/style&gt;

&lt;body&gt;
 &lt;div class='center'&gt;
  should be centered verticaly
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>

<p>and can be combined for both</p>

<pre><code>   &lt;!-- for both --&gt;
 &lt;style&gt;
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
&lt;/style&gt;


&lt;body&gt;
 &lt;div class='center'&gt;
  should be centered
 &lt;/div&gt;
&lt;/body&gt;
</code></pre>


blocks|key|5176076|text|或者你现在可以使用带有绝对位置的flex+box：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5176077|.parent+{
++++position:+relative;
++++display:+flex;
++++justify-content:+center;
}

.child+{
++++position:+absolute;
}|code-block|syntax|javascript|5176078|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 now use flex box with postion absolute: </p>

<pre><code>.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}
</code></pre>


blocks|key|1446879|text|++++<div+class="centered_content">+content+</div>
++++<style+type="text/css">
++++.centered_content+{
+++++++text-align:+center;
+++++++position:+absolute;
+++++++left:+0;
+++++++right:+0;
++++}
++++</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1446880|查看演示：http://jsfiddle.net/MohammadDayeh/HrZLC/|unstyled|offset|length|1446881|text-align:+center；在添加left:+0;+right:+0;时使用position:+absolute元素|style|CODE|1446882|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/MohammadDayeh/HrZLC/^0|0|5|14|0|0|0|I|M|I|17|I|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@$G|W|H|X|1|Y]]|A|$]]|$1|I|3|J|5|F|7|Z|8|@$G|10|H|11|K|L]|$G|12|H|13|K|L]|$G|14|H|15|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|F|7|16|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>    &lt;div class="centered_content"&gt; content &lt;/div&gt;
    &lt;style type="text/css"&gt;
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    &lt;/style&gt;
</code></pre>

<p>see demo on: <a href="http://jsfiddle.net/MohammadDayeh/HrZLC/" rel="noreferrer">http://jsfiddle.net/MohammadDayeh/HrZLC/</a> <br></p>

<p><code>text-align: center</code>; works with a <code>position: absolute</code> element when adding <code>left: 0; right: 0;</code></p>


blocks|key|3757504|text|越简单越好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3757505|img+{
++++++++++++top:+0;
++++++++++++bottom:+0;
++++++++++++left:+0;
++++++++++++right:+0;
++++++++++++margin:+auto+auto;
++++++++++++position:+absolute;
}|code-block|syntax|javascript|3757506|然后，您需要将img标记插入到使用position:relative属性的标记中，如下所示：|3757507|<div+style="width:256px;+height:+256px;+position:relative;">
++++++<img+src="photo.jpg"/>
</div>|3757508|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>The simpler, the best:</p>

<pre><code>img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}
</code></pre>

<p>Then you need to insert your img tag into a tag that sports position:relative property, as follows:</p>

<pre><code>&lt;div style="width:256px; height: 256px; position:relative;"&gt;
      &lt;img src="photo.jpg"/&gt;
&lt;/div&gt;
</code></pre>


blocks|key|3757957|text|可能是最短的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3757958|position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0+auto;|code-block|syntax|javascript|3757959|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>probably the shortest</p>

<pre><code>position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
</code></pre>


blocks|key|5175898|text|如果你不知道元素的宽度，你可以使用下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5175899|<body>
<div+style="position:+absolute;+left:+50%25;">
++++<div+style="position:+relative;+left:+-50%25;+border:+dotted+red+1px;">
++++++++I+am+some+centered+shrink-to-fit+content!+<br+/>
++++++++tum+te+tum
++++</div>
</div>|code-block|syntax|javascript|5175900|​|5175901|小提琴演示：http://jsfiddle.net/wrh7a21r/|offset|length|5175902|来源：https://stackoverflow.com/a/1777282/1136132|5175903|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/wrh7a21r/|1|https://stackoverflow.com/a/1777282/1136132^0|0|0|0|6|T|0|0|3|17|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|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@$K|16|L|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]]]

<p>If you don't know the width of the element you can use this code:</p>

<pre><code>&lt;body&gt;
&lt;div style="position: absolute; left: 50%;"&gt;
    &lt;div style="position: relative; left: -50%; border: dotted red 1px;"&gt;
        I am some centered shrink-to-fit content! &lt;br /&gt;
        tum te tum
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p></p>

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

<p>Source: <a href="https://stackoverflow.com/a/1777282/1136132">https://stackoverflow.com/a/1777282/1136132</a></p>


blocks|key|5176004|text|使用left:+calc(50%25+-+Wpx/2);，其中W是元素的宽度，对我来说是可行的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5176005|entityMap^0|2|O|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Using 
<code>left: calc(50% - Wpx/2);</code> where W is the width of the element works for me.</p>


blocks|key|1647130|text|您可以使用"transform“属性：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647131|position:+absolute;
top:+50%25;
left:+50%25;
-webkit-transform:+translateX(-50%25)+translateY(-50%25);
transform:+translateX(-50%25)+translateY(-50%25);|code-block|syntax|javascript|1647132|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>You can use the &quot;transform&quot; attribute:</p>
<pre><code>position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
</code></pre>


blocks|key|1646521|text|您的图像没有居中，因为您的列表项没有居中；只有文本居中。您可以通过使整个列表居中或使列表中的图像居中来实现所需的定位。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1646522|您的代码的修订版可以在底部找到。在我的修订中，我将列表和其中的图像都居中。|1646523|事实是，对于位置设置为的元素，不能居中。|1646524|但是这种行为是可以模仿的！|1646525|注意:这些指令适用于任何DOM块元素，而不仅仅是img。|1646526|1646527|用div或其他标签(在你的例子中是li)包围你的图像。|ordered-list-item|1646528|改变你的css或scss，给出div的绝对位置和你的图像居中。|1646529|1646530|.absolute-div+{位置:绝对；宽度:+100%25；//居中的范围。//如果此元素的父元素是正文，则100%25+=窗口的宽度//注意:您可以应用附加的top/bottom和left/right属性//即-+top:+200px；left:+200px；//测试所需的位置。}..absolute+div+img+{+width:+500px；//注意:设置宽度对于margin:+auto正常工作至关重要。边距:0+auto；}|1646531|现在你就知道了！你的img应该居中！|1646532|你的代码：|1646533|试试这个：|1646534|​|1646535|body
{
++text-align+:+center;
}

#slideshow
{
++list-style+:+none;
++width++++++:+800px;
++//+alter+to+taste

++margin+++++:+50px+auto+0;
}

#slideshow+li
{
++position+:+absolute;
}

#slideshow+img
{
++border++:+1px+solid+#CCC;
++padding+:+4px;
++height++:+500px;
++width+++:+auto;
++//+This+sets+the+width+relative+to+your+set+height.

++//+Setting+a+width+is+required+for+the+margin+auto+attribute+below.+

++margin++:+0+auto;
}|code-block|syntax|javascript|1646536|<ul+id="slideshow">
++++<li><img+src="http://lorempixel.com/500/500/nature/"+alt="Dummy+1"+/></li>
++++<li><img+src="http://lorempixel.com/500/500/nature/"+alt="Dummy+2"+/></li>
</ul>|1646537|1646538|，我希望这对你有帮助。祝你好运！|1646539|entityMap^0|0|1N|0|0|F|5|0|0|D|0|0|S|0|0|0|R|0|0|V|0|0|0|61|0|0|I|0|0|5|0|0|5|0|0|1|0|0|0|0|1|0|0|G|0^^$0|@$1|2|3|4|5|6|7|1G|8|@$9|1H|A|1I|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1J|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1N|8|@$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]|$1|O|3|P|5|Q|7|1U|8|@$9|1V|A|1W|B|C]]|D|@]|E|$]]|$1|R|3|S|5|Q|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|20|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|W|3|X|5|6|7|24|8|@$9|25|A|26|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|10|3|11|5|6|7|2A|8|@$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|12|3|13|5|6|7|2D|8|@$9|2E|A|2F|B|C]]|D|@]|E|$]]|$1|14|3|15|5|16|7|2G|8|@]|D|@]|E|$17|18]]|$1|19|3|1A|5|16|7|2H|8|@]|D|@]|E|$17|18]]|$1|1B|3|13|5|6|7|2I|8|@$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|2L|8|@$9|2M|A|2N|B|C]]|D|@]|E|$]]|$1|1E|3|-4|5|6|7|2O|8|@]|D|@]|E|$]]]|1F|$]]

<p><strong>Your images are not centered because your list items are not centered; only their text is centered. You can achieve the positioning you want by either centering the entire list or centering the images within the list.</strong> </p>

<p><em>A revised version of your code can be found at the bottom. In my revision I center both the list and the images within it.</em></p>

<p><em>The truth is you <strong>cannot</strong> center an element that has a position set to absolute.</em></p>

<h1>But this behavior can be imitated!</h1>

<p><em>Note: These instructions will work with any DOM block element, not just img.</em></p>

<ol>
<li><p>Surround your image with a div or other tag (in your case a li).</p>

<pre><code>&lt;div class="absolute-div"&gt;
  &lt;img alt="my-image" src="#"&gt;
&lt;/div&gt;
</code></pre>

<p><em>Note: The names given to these elements are not special.</em></p></li>
<li><p>Alter your css or scss to give the div absolute positioning and your image centered.</p>

<pre><code>.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}
</code></pre></li>
</ol>

<h1>And there you have it! Your img should be centered!</h1>

<h2>Your code:</h2>

<p>Try this out:</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>body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul id="slideshow"&gt;
    &lt;li&gt;&lt;img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /&gt;&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>

<p><strong>I hope this was helpful. Good luck!</strong></p>


blocks|key|5175994|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5175995|📷|atomic|offset|length|5175996|5175997|我不确定您想要完成什么，但在这种情况下，只需向您的ul#slideshow+li添加width:+100%25;就可以了。|style|CODE|5175998|解释|5175999|img标记是内联块元素。这意味着它们像文本一样在内联中流动，但也像块元素一样具有宽度和高度。在你的css中，有两个text-align:+center;规则应用于<body>和#slideshowWrapper+(顺便说一句，这是多余的)，这使得所有的内联和内联块子元素在它们最近的块元素中居中，在你的代码中，这些是li标签。如果是静态流(position:+static;)，则所有块元素都具有width:+100%25，这是默认设置。问题是，当您告诉li标记为position:+absolute;时，您会将它们从正常的静态流中去掉，这会导致它们缩小大小以适应其内部内容，换句话说，它们有点“丢失”了width:+100%25属性。|5176000|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/29e8034123834485755da33dcbf65973.gif|imageAlt^0|0|0|1|0|0|0|P|F|16|C|0|0|0|3|1L|J|29|6|2G|H|4E|2|4Q|H|5I|B|69|2|6E|J|8C|B|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@$E|10|F|11|1|12]]|A|$]]|$1|G|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@$E|15|F|16|J|K]|$E|17|F|18|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1A|8|@$E|1B|F|1C|J|K]|$E|1D|F|1E|J|K]|$E|1F|F|1G|J|K]|$E|1H|F|1I|J|K]|$E|1J|F|1K|J|K]|$E|1L|F|1M|J|K]|$E|1N|F|1O|J|K]|$E|1P|F|1Q|J|K]|$E|1R|F|1S|J|K]|$E|1T|F|1U|J|K]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]]]

<p><a href="https://i.stack.imgur.com/masgh.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/masgh.gif" alt="enter image description here"></a></p>

<p>I'm not sure what you want to accomplish, but in this case just adding <code>width: 100%;</code> to your <code>ul#slideshow li</code> will do the trick.</p>

<h3>Explanation</h3>

<p>The <code>img</code> tags are inline-block elements. This means that they flow inline like text, but also have a width and height like block elements. In your css there are two <code>text-align: center;</code> rules applied to the <code>&lt;body&gt;</code> and to the <code>#slideshowWrapper</code> (which is redundant btw) this makes all inline and inline-block child elements to be centered in their closest block elements, in your code these are <code>li</code> tags. All block elements have <code>width: 100%</code> if they are the static flow (<code>position: static;</code>), which is default. The problem is that when you tell <code>li</code> tags to be <code>position: absolute;</code>, you take them out of normal static flow, and this causes them to shrink their size to just fit their inner content, in other words they kind of "lose" their <code>width: 100%</code> property.</p>


blocks|key|3757315|text|相对对象内的绝对对象是相对于其父对象的，这里的问题是您需要容器#slideshowWrapper的静态宽度，而解决方案的其余部分就像其他用户所说的那样|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3757316|body+{
++++text-align:+center;
}

#slideshowWrapper+{
++++margin-top:+50px;
++++text-align:center;
++++width:+500px;
}

ul#slideshow+{
++++list-style:+none;
++++position:+relative;
++++margin:+auto;
}

ul#slideshow+li+{
++++position:+relative;
++++left:+50%25;
}

ul#slideshow+li+img+{
++++border:+1px+solid+#ccc;
++++padding:+4px;
++++height:+450px;
}|code-block|syntax|javascript|3757317|http://jsfiddle.net/ejRTU/10/|3757318|entityMap|0|LINK|mutability|MUTABLE|url^0|V|H|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|M|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>An absolute object inside a relative object is relative to its parent, the problem here is that you need  a static width for the container <code>#slideshowWrapper</code> , and the rest of the solution is like the other users says</p>

<pre><code>body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}
</code></pre>

<p><a href="http://jsfiddle.net/ejRTU/10/" rel="nofollow">http://jsfiddle.net/ejRTU/10/</a></p>


blocks|key|1442834|text|以下是使用“position:absolute”的中心元素的简单且最佳的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442835|​|1442836|+body,html{
++min-height:100%25;
+}
+
+div.center{
+width:200px;
+left:50%25;
+margin-left:-100px;/*this+is+50%25+value+for+width+of+the+element*/
+position:absolute;
+background:#ddd;
+border:1px+solid+#999;
+height:100px;
+text-align:center
+}|code-block|syntax|javascript|1442837|<style>

</style>

<body>
+<div+class='center'>
++should+be+centered+verticaly
+</div>
</body>|1442838|1442839|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Here is easy and best solution for center element with “position: absolute” </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> body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }
 
 </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;

&lt;/style&gt;

&lt;body&gt;
 &lt;div class='center'&gt;
  should be centered verticaly
 &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1647085|text|只需在父元素上使用display:+flex和justify-content:+center|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1647086|​|1647087|body+{
++++text-align:+center;
}

#slideshowWrapper+{
++++margin-top:+50px;
++++text-align:+center;
}

ul#slideshow+{
++++list-style:+none;
++++position:+relative;
++++margin:+auto;
++++display:+flex;
++++justify-content:+center;
}

ul#slideshow+li+{
++++position:+absolute;
}

ul#slideshow+li+img+{
++++border:+1px+solid+#ccc;
++++padding:+4px;
++++height:+100px;
}|code-block|syntax|javascript|1647088|<body>
+++<div+id="slideshowWrapper">
++++++<ul+id="slideshow">
+++++++++<li><img+src="https://source.unsplash.com/random/300*300?technology"+alt="Dummy+1"+/></li>
+++++++++<li><img+src="https://source.unsplash.com/random/301*301?technology"+alt="Dummy+2"+/></li>
++++++</ul>
+++</div>
</body>

|1647089|1647090|1647091|您可以在JSFIDDLE|blockquote|1647092|
中找到此解决方案|1647093|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/richierich25/pahg8Le5/86/^0|9|D|N|N|0|0|0|0|0|0|4|8|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|T|3|U|5|6|7|1H|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|12]]]]

<p>Just use <code>display: flex</code> and <code>justify-content: center</code> on the parent element</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>body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align: center;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
    display: flex;
    justify-content: center;
}

ul#slideshow li {
    position: absolute;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
   &lt;div id="slideshowWrapper"&gt;
      &lt;ul id="slideshow"&gt;
         &lt;li&gt;&lt;img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /&gt;&lt;/li&gt;
         &lt;li&gt;&lt;img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/div&gt;
&lt;/body&gt;

&lt;!-- Images from Unsplash--&gt;</code></pre>
</div>
</div>
</p>
<blockquote>
<p>You can find this solution in <a href="https://jsfiddle.net/richierich25/pahg8Le5/86/" rel="nofollow noreferrer">JSFIDDLE</a></p>
</blockquote>


blocks|key|1447063|text|您可以尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447064|​|1447065|*+{+margin:+0px;+padding:+0px;+}
#body+{+height:+100vh;+width:+100vw;+position:+relative;+
++++++++text-align:+center;+
++++++++background-image:+url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg');+
+++++++++background-size:+cover;+background-repeat:+no-repeat;+}
.text+{+position:+absolute;+top:+0;+bottom:+0;+left:+0;+right:+0;+height:100px;+
++++++++display:+inline-block;+margin:+auto;+z-index:+999999;+}|code-block|syntax|javascript|1447066|<html>
<body>
	<div+id="body"+class="container-fluid">
	++
	++++
		++<div+class="text">
		++++<p>Random</p>
		++</div>	++
	</div>
</body>
</html>|1447067|1447068|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can try this way :</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>* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;
	&lt;div id="body" class="container-fluid"&gt;
	  &lt;!--Background--&gt;
	    &lt;!--Text--&gt;
		  &lt;div class="text"&gt;
		    &lt;p&gt;Random&lt;/p&gt;
		  &lt;/div&gt;	  
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1647108|text|1-当您知道绝对定位元素的宽度时。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1647109|width:+200px;
position:+absolute;
left:+50%25;
margin-left:+-100px|code-block|syntax|javascript|1647110|2-当你不知道绝对定位元素的宽度时。响应性非常好，但是CSS3较旧的浏览器可能会有问题。|1647111|position:+absolute;
left:+50%25;
-webkit-transform:+translateX(-50%25);
transform:+translateX(-50%25)|1647112|3-当你不知道绝对定位的元素的宽度，但使它100%25宽的父元素，这可能不符合设计。|1647113|position:+absolute;
left:+0;
right:+0;
margin:+auto|1647114|如果你知道宽度，你也可以使用第三个选项，它会居中。|1647115|entityMap^0|0|0|0|0|0|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|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>1- when you know the width of the absolutely positioned element.</p>
<pre><code>width: 200px;
position: absolute;
left: 50%;
margin-left: -100px
</code></pre>
<p>2- when you don’t know the width of the absolutely positioned element. Excellent for responsiveness but is CSS3 older browsers may have an issue.</p>
<pre><code>position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
</code></pre>
<p>3- when you don’t know the width of the absolutely positioned element but makes it 100% wide of it’s parent which might not fit the design.</p>
<pre><code>position: absolute;
left: 0;
right: 0;
margin: auto
</code></pre>
<p>If you do know the width, you can use the third option as well and it will center.</p>


blocks|key|1447120|text|对于这种情况，我认为如下代码就足够了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1447121|++++ul#slideshow+li+{
++++++position:+absolute;
++++++left:+0;
++++++right:+0;
++++}|code-block|syntax|javascript|1447122|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>For this case, I think the code as below is enough:</p>
<pre class="lang-css prettyprint-override"><code>    ul#slideshow li {
      position: absolute;
      left: 0;
      right: 0;
    }
</code></pre>


blocks|key|3758043|text|正如许多人所说的那样，⬇️|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3758044|.element+{
++position:+absolute;
++left:+0;
++top:+0;
++transform:+translate(-50%25,+-50%25);
}|code-block|syntax|javascript|3758045|应该行得通。但请注意，HTML必须在具有.element:+relative;的包装器中(以防您不想让它位于整个页面的中心)。|offset|length|style|BOLD|3758046|我做了一个用于CSS居中的伪库。我需要它给我的开发后辈。所以，请随时查看它。http://dev.solcode.net/centercss/|3758047|entityMap|0|LINK|mutability|MUTABLE|url|http://dev.solcode.net/centercss/^0|0|0|1K|7|0|0|G|12|X|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@$I|12|J|13|K|L]]|9|@$I|14|J|15|1|16]]|A|$]]|$1|O|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>as many others said this ⬇️</p>
<pre><code>.element {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
}
</code></pre>
<p>should work. But be aware, that the <strong>.element must be in a wrapper that has position: relative;</strong> (in case you don't want to make it in the center of the whole HTML page)</p>
<p>FYI: <strong>I've made a pseudo-library for CSS centering.</strong> I needed it for my dev juniors. So, feel free to check it out. <a href="http://dev.solcode.net/centercss/" rel="nofollow noreferrer">http://dev.solcode.net/centercss/</a></p>


blocks|key|1646846|text|#parent
{
++++position+:+relative;
++++height:+0;
++++overflow:+hidden;
++++padding-bottom:+56.25%25+/*+images+with+aspect+ratio:+16:9++*/
}

img+
{
++++height:+auto!important;
++++width:+auto!important;
++++min-height:+100%25;
++++min-width:+100%25;
++++position:+absolute;
++++display:+block;
++++/*++*/
++++top:+-9999px;
++++bottom:+-9999px;
++++left:+-9999px;
++++right:+-9999px;
++++margin:+auto;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1646847|我不记得我在哪里看到了上面列出的居中方法，使用负的top，right，bottom，left值。对我来说，在大多数情况下，这种技术是最好的。|unstyled|1646848|当我使用上面的组合时，图像的行为类似于具有以下设置的背景图像：|1646849|background-position:+50%25+50%25;
background-repeat:+no-repeat;
background-size:+cover;|1646850|有关第一个示例的更多详细信息，请参阅此处：|1646851|Maintain+the+aspect+ratio+of+a+div+with+CSS|offset|length|1646852|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css^0|0|0|0|0|0|0|17|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|F|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|F|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<pre class="lang-css prettyprint-override"><code>#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}
</code></pre>

<p>I don't remember where I saw the centering method listed above, using negative top, right, bottom, left values.
For me, this tehnique is the best, in most situations.</p>

<p>When I use the combination from above, the image behaves like a background-image with the following settings:</p>

<pre class="lang-css prettyprint-override"><code>background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
</code></pre>

<p>More details about the first example can be found here:<br>
<a href="https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css">Maintain the aspect ratio of a div with CSS</a></p>


blocks|key|3758001|text|我最喜欢的将任何元素或一组元素绝对居中的方法是绝对定位它们的容器，使其成为相对容器的高度和宽度，然后使用flex对齐其中的元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3758002|在此特定情况下：|3758003|body+{
++position:+relative;+/*+OPTIONAL+*/
}

#slideshowWrapper+{
++position:+absolute;
++top:+0;
++left:+0;
++width:+100%25;
++height:+100%25;
++display:+flex;
++flex-direction:+row;+/*+OPTIONAL+IF+ONLY+ONE+ELEMENT+*/
++justify-content:+center;
++align-items:+center;
}|code-block|syntax|javascript|3758004|希望这能帮上忙，干杯。|3758005|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>My favorite method to absolute center any element or group of elements is to absolute position their container, make it the height and width of the relative container, then use flex to align the elements within.</p>
<p>In this specific case:</p>
<pre><code>body {
  position: relative; /* OPTIONAL */
}

#slideshowWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* OPTIONAL IF ONLY ONE ELEMENT */
  justify-content: center;
  align-items: center;
}

</code></pre>
<p>Hope that helps, cheers.</p>


blocks|key|1446726|text|绝对位置将其从流中取出，并将其放置在父元素(具有绝对位置或相对位置的最后一个块元素)的0x0处。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1446727|我不确定您到底想要实现什么，最好将li设置为position:relative，这样将使它们居中。给定您当前的CSS|offset|length|style|CODE|1446728|请查看http://jsfiddle.net/rtgibbons/ejRTU/以使用它|1446729|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/rtgibbons/ejRTU/^0|0|M|H|0|3|10|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|J|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>Position absolute takes it out of the flow, and places it at 0x0 to the parent ( Last block element to have a position absolute or position relative ).</p>

<p>I'm not sure what exactly you what you are trying to accomplish, It might be best to set the li to a <code>position:relative</code> and that will center them. Given your current CSS</p>

<p>Check out <a href="http://jsfiddle.net/rtgibbons/ejRTU/" rel="nofollow">http://jsfiddle.net/rtgibbons/ejRTU/</a> to play with it</p>


blocks|key|1446794|text|使用margin-left:+x%25;，其中x是元素宽度的一半。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1446795|entityMap^0|2|G|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Use <code>margin-left: x%;</code> where x is the half of the width of the element.</p>


blocks|key|1442714|text|似乎有两种解决方案:居中使用边距和居中使用位置。这两种方法都可以很好地工作，但如果要相对于居中元素绝对定位元素，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为定位的第一个父元素。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1442715|
<div+style="width:300px;+height:100px;+border:+1px+solid+#000;+margin:20px+auto;+text-+align:center;">
++++<p+style="line-height:4;">width:+300+px;+margin:+0+auto</p>
++++<div+style="position:absolute;+width:100px;+height:100px;+background-color:#ff0000;+top:-20px;+left:0px;">
++++++++<p+style="line-height:4;">Absolute</p>
++++</div>
</div>


<div+style="position:absolute;+left:50%25;+width:300px;+height:100px;+border:+1px+solid+#000;+margin:20px+0+20px+-150px;+text-align:center;">
++++<p+style="line-height:2;">width:300px;+position:+absolute;+left:+50%25;+margin-left:-150px;</p>
++++<div+style="position:absolute;+width:100px;+height:100px;+background-color:#ff0000;+top:0px;+left:-105px;">
++++++++<p+style="line-height:4;">Absolute</p>
++++</div>
</div>|code-block|syntax|javascript|1442716|在我读完这篇文章之前，为了在我的内容的左边建立一个菜单，我必须在右边建立一个等宽的列来平衡它。不是很漂亮。谢谢!|1442717|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>What seems to be happening is there are two solutions; centered using margins and centered using position. Both work fine, but if you want to absolute position an element relative to this centered element, you need to use the absolute position method, because the absolute position of the second element defaults to the first parent that is positioned. Like so:</p>

<pre><code>&lt;!-- CENTERED USING MARGIN --&gt;
&lt;div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;"&gt;
    &lt;p style="line-height:4;"&gt;width: 300 px; margin: 0 auto&lt;/p&gt;
    &lt;div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;"&gt;
        &lt;p style="line-height:4;"&gt;Absolute&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;!-- CENTERED USING POSITION --&gt;
&lt;div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;"&gt;
    &lt;p style="line-height:2;"&gt;width:300px; position: absolute; left: 50%; margin-left:-150px;&lt;/p&gt;
    &lt;div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;"&gt;
        &lt;p style="line-height:4;"&gt;Absolute&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Until I'd read this posting, using the margin:0 auto technique, to build a menu to the left of my content I had to build a same-width column to the right to balance it out. Not pretty. Thanks!</p>


blocks|key|5176029|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5176030|html,+body,+ul,+li,+img+{
++box-sizing:+border-box;
++margin:+0px;++
++padding:+0px;++
}

#slideshowWrapper+{
++width:+25rem;
++height:+auto;
++position:+relative;
++
++margin-top:+50px;
++border:+3px+solid+black;
}

ul+{
++list-style:+none;
++border:+3px+solid+blue;++
}

li+{
++/*+center+horizontal+*/
++position:+relative;
++left:+0;
++top:+50%25;
++width:+100%25;
++text-align:+center;
++font-size:+18px;
++/*+center+horizontal+*/
++
++border:+3px+solid+red;+
}

img+{
++border:+1px+solid+#ccc;
++padding:+4px;
++//width:+200px;
++height:+100px;
}|code-block|syntax|javascript|5176031|<body>
++<div+id="slideshowWrapper">
++++<ul+id="slideshow">
++++++<li><img+src="http://via.placeholder.com/350x150"+alt="Dummy+1"+/></li>
++++++<li><img+src="http://via.placeholder.com/140x100"+alt="Dummy+2"+/></li>
++++++<li><img+src="http://via.placeholder.com/200x100"+alt="Dummy+3"+/></li>++++++
++++</ul>
++</div>
</body>|5176032|5176033|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<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>html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="slideshowWrapper"&gt;
    &lt;ul id="slideshow"&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/350x150" alt="Dummy 1" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/140x100" alt="Dummy 2" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://via.placeholder.com/200x100" alt="Dummy 3" /&gt;&lt;/li&gt;      
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


<p>I'm having a problem centering an element that has the attribute <code>position</code> set to <code>absolute</code>.
Does anyone know why the images are not centered?</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>body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div id="slideshowWrapper"&gt;
    &lt;ul id="slideshow"&gt;
      &lt;li&gt;&lt;img src="https://source.unsplash.com/random/300*300?technology" alt="Dummy 1" /&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="https://source.unsplash.com/random/301*301?technology" alt="Dummy 2" /&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>


How to center a "position: absolute" element

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

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

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

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

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

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

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

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在将属性position设置为absolute的元素居中时遇到问题。有人知道为什么图像没有居中吗？​body {  text-align: center;}#slideshowWrapper {  margin-top: 50px;  text-align: center;}ul#slideshow {  list-style: none;  position: relative;  margi

问如何使"position: absolute“元素居中
EN

回答 30

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使"position: absolute“元素居中EN

回答 30

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使"position: absolute“元素居中
EN