目前似乎有两种解决方案;边距居中，位置居中。这两种工作都很好，但是如果您想要相对于这个居中元素的绝对位置，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为所定位的第一个父元素。像这样:

<!-- 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自动技术，在我的内容的左边建立一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢!

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

参见demo: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align:中心;工作与位置:绝对元素时添加左:0;右:0;

正如许多人所说的⬇️

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

应该工作。但是请注意，.element必须位于具有position: relative;(以防你不想把它放在整个HTML页面的中心)

供你参考:我做了一个CSS居中的伪库。我需要它给我的后辈开发人员。所以，尽管去看看吧。http://dev.solcode.net/centercss/

你的图片没有居中，因为你的列表项没有居中;只有文本是居中的。您可以通过居中整个列表或居中列表中的图像来实现您想要的定位。

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

事实上，不能将位置设置为绝对的元素居中。

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

注意:这些指令将适用于任何DOM块元素，而不仅仅是img。

Surround your image with a div or other tag (in your case a li). <div class="absolute-div"> <img alt="my-image" src="#"> </div> Note: The names given to these elements are not special. Alter your css or scss to give the div absolute positioning and your image centered. .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; }

现在你知道了!你的img应该居中!

你的代码:

试试这个吧:

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>

我希望这对你们有帮助。好运！

#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的纵横比

在不知道positioned1元素的宽/高的情况下，仍然可以按如下方式对齐它:

例子

.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 of
                                         translateX(-50%) and translateY(-50%) */
}

值得注意的是，CSS Transform在IE9及以上版本中是受支持的。(为简洁起见，省略了供应商前缀)

解释

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

这是因为顶部/左侧属性上的百分比值是相对于父元素的高度/宽度的(它正在创建一个包含块)。

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

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

1. 具有非静态位置的元素。即相对的，绝对的，固定的值。