小开

将absolutely定位的东西居中在CSS中相当复杂。

ul#slideshow li {position: absolute;left:50%;margin-left:-20px;
}

将margin-left更改为（负）要居中的元素宽度的一半。

小开

位置绝对将其从流中取出，并将其放置在0x0到父元素（最后一个具有位置绝对或位置相对的块元素）。

我不确定你到底想完成什么，最好将li设置为position:relative，这将使它们居中。鉴于您当前的CSS

查看http://jsfiddle.net/rtgibbons/ejRTU/与它一起玩

小开

要居中一个位置：绝对属性，您需要设置左：50%和边际左：-50%的div宽度。

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

<body><div class='center'>should be centered horizontaly</div></body>

对于垂直中心绝对，你需要做同样的事情芽不是左只是顶部。（注意：html和body必须有100%的最小高度；）

<!-- for vertical --><style>body,html{min-height:100%;}div.center{height:200px;top:50%;margin-top:-100px;position:absolute;}</style>
<body><div class='center'>should be centered verticaly</div></body>

并且可以两者结合

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

<body><div class='center'>should be centered</div></body>

小开

相对对象中的绝对对象是相对于其父对象的，这里的问题是您需要容器#slideshowWrapper的静态宽度，其余的解决方案就像其他用户所说的那样

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;}

小开

一个简单的CSS技巧，只需添加：

width: 100%;text-align: center;

这适用于图像和文本。

小开

使用margin-left: x%;，其中x是元素宽度的一半。

小开

如果您设置了宽度，则可以使用：

position: absolute;margin-left: auto;margin-right: auto;left: 0;right: 0;text-align: center;

小开

您的图像没有居中，因为您的列表项没有居中；只有它们的文本居中。您可以通过将整个列表居中或将列表中的图像居中来实现所需的定位。

代码的修订版可以在底部找到。在我的修订版中，我将列表和其中的图像居中。

事实是，你不能将一个位置设置为绝对的元素居中。

但这种行为是可以模仿的！

注意：这些说明适用于任何DOM块元素，而不仅仅是img。

用div或其他标签（在您的情况下是li）包围您的图像。
```
<div class="absolute-div"><img alt="my-image" src="#"></div>
```
注意：这些元素的名称并不特殊。

更改您的css或scss以使div绝对定位并将图像居中。

.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;}

And there you have it! Your img should be centered!

Your code:

Try this out:

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;}

<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>

我希望这是有帮助的。祝你好运！

小开

Div垂直和水平对齐中心

top: 0;bottom: 0;margin: auto;position: absolute;left: 0;right: 0;

注意：元素应设置宽度和高度

小开

越简单，越好：

img {top: 0;bottom: 0;left: 0;right: 0;margin: auto auto;position: absolute;}

然后你需要将你的img标签插入到运动位置：相对属性的标签中，如下所示：

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

小开

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

请参阅演示：http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center；在添加left: 0; right: 0;时使用position: absolute元素

小开

如果你想把一个绝对元素放在中间

#div {position:absolute;top:0;bottom:0;left:0;right:0;width:300px; /* Assign a value */height:500px; /* Assign a value */margin:auto;}

如果你想让一个容器从左到右居中，而不是从上到下居中

#div {position:absolute;left:0;right:0;width:300px; /* Assign a value */height:500px; /* Assign a value */margin:auto;}

如果你想让一个容器从上到下居中，不管是从左到右

#div {position:absolute;top:0;bottom:0;width:300px; /* Assign a value */height:500px; /* Assign a value */margin:auto;}

2015年12月15日更新

几个月前，我学到了另一个新技巧。假设你有一个相对的父元素。

这是你的绝对元素。

.absolute-element {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:50%; /* You can specify ANY width values here */}

有了这个，我认为这是一个比我的旧解决方案更好的答案。因为你不必指定宽度和高度。这个它调整元素本身的内容。

2021年4月23日更新

它没有回答OP关于绝对位置的问题，但是如果你想要另一种解决方案，有这个称为flexbox。这是一个例子。

#parent {display:flex;align-items:center;justify-content:center;}

它所做的是将容器转换为flex，并使用justify-content:center将子项对齐到水平中心，使用align-items:center将垂直对齐。它也支持现代浏览器，因此使用起来很安全。

不过，请务必先阅读flexbox的工作原理。

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

Flexbox支持的浏览器

https://caniuse.com/flexbox

小开

似乎发生的是有两种解决方案；使用边距居中和使用位置居中。两者都很好，但是如果你想相对于这个居中元素绝对定位一个元素，你需要使用绝对位置方法，因为第二个元素的绝对位置默认为定位的第一个父元素。如下所示：

<!-- CENTERED USING MARGIN --><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>
<!-- CENTERED USING POSITION --><div style="position:absolute; left:50%; 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%; 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>

直到我读到这篇文章，使用空白：0自动技术，在我的内容左边建立一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢！

小开

在不知道定位的¹元素的width/height的情况下，仍然可以将其对齐如下：

这里的例子

.child {position: absolute;top: 50%;  /* position the top  edge of the element at the middle of the parent */left: 50%; /* position the left edge of the element at the middle of the parent */
transform: translate(-50%, -50%); /* This is a shorthand oftranslateX(-50%) and translateY(-50%) */}

值得注意的是CSS转换 IE9及更高版本支持.（为简洁起见省略供应商前缀）

补充说明

添加50%的top/left将元素的上/左边距边缘移动到父元素的中间，translate()函数的（负数）值为-50%将元素移动其大小的一半。因此元素将位于中间。

这是因为top/left属性的百分比值是相对于父元素（创建包含块）的高度/宽度的。

而translate()转换函数上的百分比值相对于元素本身的宽度/高度（实际上它指的是边界框的大小）。

对于单向对齐，请使用translateX(-50%)或translateY(-50%)。

^{1.position不是static的元素。即relative、absolute、fixed值。}

小开

如果你不知道元素的宽度，你可以使用以下代码：

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

小提琴演示：http://jsfiddle.net/wrh7a21r/

来源：https://stackoverflow.com/a/1777282/1136132

小开

#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;}

我不记得我在哪里看到上面列出的居中方法，使用负的顶部，右侧，底部，左侧值。对我来说，这种技术在大多数情况下都是最好的。

当我使用上面的组合时，图像的行为就像背景图像，具有以下设置：

background-position: 50% 50%;background-repeat: no-repeat;background-size: cover;

关于第一个例子的更多细节可以在这里找到：
使用CSS维护div的长宽比

小开

我不确定你想要完成什么，但在这种情况下，只需将width: 100%;添加到你的ul#slideshow li即可。

补充说明

img标签是内联块元素。这意味着它们像文本一样内联流动，但也有像块元素一样的宽度和高度。在你的css中，有两个text-align: center;规则应用于<body>和#slideshowWrapper（顺便说一句，这是多余的），这使得所有内联和内联块子元素都以它们最接近的块元素为中心，在你的代码中，这些是li标签。如果它们是静态流（position: static;），所有块元素都有width: 100%，这是默认的。问题是，当你告诉li标签是position: absolute;时，你把它们从正常的静态流中拿出来，这导致它们缩小大小以适应它们的内部内容，换句话说，它们有点“失去”它们的width: 100%属性。

小开

使用left: calc(50% - Wpx/2);其中W是适合我的元素的宽度。

小开

这是具有“位置：绝对”的中心元素的简单和最佳解决方案

 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}

<style>
</style>
<body><div class='center'>should be centered verticaly</div></body>

小开

这对我有效：

position: absolute;left: 50%;transform: translateX(-50%);

小开

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;}

<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>

小开

你可以试试这个方法：

* { 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; }

<html><body><div id="body" class="container-fluid"><!--Background--><!--Text--><div class="text"><p>Random</p></div></div></body></html>

小开

居中的“位置：绝对”元素。

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

小开

可能是最短的

position:absolute;left:0;right:0;top:0;bottom:0;margin:0 auto;

小开

或者您现在可以使用具有绝对位置的flex box：

.parent {position: relative;display: flex;justify-content: center;}
.child {position: absolute;}

小开

只需在父元素上使用display: flex和justify-content: center

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;}

<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>
<!-- Images from Unsplash-->

您可以在JSFIDDLE中找到此解决方案

小开

1-当您知道绝对定位元素的宽度时。

width: 200px;position: absolute;left: 50%;margin-left: -100px

2-当您不知道绝对定位元素的宽度时。非常适合响应性，但CSS3较旧的浏览器可能会有问题。

position: absolute;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%)

3-当您不知道绝对定位元素的宽度，但使其100%宽的父元素可能不适合设计时。

position: absolute;left: 0;right: 0;margin: auto

如果你知道宽度，你也可以使用第三个选项，它将居中。

小开

我最喜欢的将任何元素或元素组绝对居中的方法是绝对定位它们的容器，使其成为相对容器的高度和宽度，然后使用flex对齐其中的元素。

在这种情况下：

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;}

希望有帮助，干杯。

小开

您可以使用“转换”属性：

position: absolute;top: 50%;left: 50%;-webkit-transform: translateX(-50%) translateY(-50%);transform: translateX(-50%) translateY(-50%);

小开

对于这种情况，我认为下面的代码就足够了：

    ul#slideshow li {position: absolute;left: 0;right: 0;}

小开

正如许多人所说⬇️

.element {position: absolute;left: 0;top: 0;transform: translate(-50%, -50%);}

应该可以。但要注意，.元素必须在具有位置：相对的包装器中；（如果你不想让它在整个超文本标记语言页面的中心）

仅供参考：我为CSS居中制作了一个伪库。我需要它为我的开发晚辈。所以，请随时查看。http://dev.solcode.net/centercss/

如何将“位置：绝对”元素居中

但这种行为是可以模仿的！

And there you have it! Your img should be centered!

Your code:

补充说明

补充说明