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

Question

我的问题是将属性position设置为absolute的元素居中。有谁知道为什么图像没有居中？

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

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Answer 1

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

Answer 2

如果不知道定位的¹元素的width / height，仍然可以按如下方式对齐它：

<强> EXAMPLE HERE

.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 is supported in IE9 and above。 （为简洁省略了供应商前缀）

说明

添加50%的{{3}} / top会将元素的上/左边距移动到父级的中间位置，并使用将left函数移动（负） -50%的值将元素移动一半大小。因此元素将位于中间。

这是因为translate() / top属性的百分比值与父元素（创建包含块）的高度/宽度有关。

虽然left translate()函数的百分比值与元素本身的宽度/高度相关（实际上它指的是transform的大小）

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

^{1。除position以外static的元素。即relative，absolute，fixed值。}

Answer 3

定位absolute定位的内容在CSS中相当复杂。

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

}

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

Answer 4

垂直和水平对齐中心

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

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

Answer 5

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

width: 100%;
text-align: center;

这适用于图像和文字。

Answer 6

如果你想以绝对元素为中心

#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 */ 
}

有了这个，我认为这比我以前的解决方案更好。因为您不必指定宽度和高度。这个它适应元素本身的内容。

Answer 7

这对我有用：

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

Answer 8

居中一个位置：你需要设置左边的绝对属性：50％和margin-left：div宽度的-50％。

<!-- 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:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


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

Answer 9

将“position：absolute”元素居中。

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

Answer 10

    <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;添加position: absolute

时，使用left: 0; right: 0;元素

Answer 11

更简单，最好：

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>

Answer 12

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

<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

Answer 13

可能最短

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

Answer 14

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

解释

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

Answer 15

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

Answer 16

您的图片未居中，因为您的列表项目未居中;只有他们的文字居中。您可以通过居中整个列表或将图像置于列表中心来实现所需的定位。

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

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

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

注意：这些说明适用于任何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;
}

你有它！你的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>

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

Answer 17

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

 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>

Answer 18

相对对象内的绝对对象是相对于其父对象的，这里的问题是你需要一个容器#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;
}

http://jsfiddle.net/ejRTU/10/

Answer 19

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

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

Answer 20

只需在父元素上使用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
中找到此解决方案

Answer 21

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

我不确定你要完成的是什么，最好将li设置为position:relative并将其置于中心位置。鉴于您当前的CSS

查看http://jsfiddle.net/rtgibbons/ejRTU/以进行播放

Answer 22

我最喜欢的绝对居中任何元素或元素组的方法是绝对定位它们的容器，使其成为相对容器的高度和宽度，然后使用 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;
}

希望有所帮助，加油。

Answer 23

或者您现在可以将flex box与绝对位置一起使用：

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

.child {
    position: absolute;
}

Answer 24

您可以尝试这种方式：

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

Answer 25

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

我不记得在哪里看到了上面列出的居中方法，使用了负值top，right，bottom，left值。对我来说，在大多数情况下，这个技术是最好的。

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

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

有关第一个例子的更多细节可以在这里找到：
Maintain the aspect ratio of a div with CSS

Answer 26

似乎正在发生的是有两种解决方案;使用边距居中并使用位置居中。两者都可以正常工作，但如果要绝对定位相对于此居中元素的元素，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为定位的第一个父元素。像这样：

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

在我阅读此帖子之前，使用margin：0 auto技术，在我的内容左侧构建一个菜单，我必须在右边建立一个相同宽度的列来平衡它。不漂亮。谢谢！

Answer 27

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

Answer 28

您可以使用“transform”属性：

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

Answer 29

＆＃13;

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

＆＃13;

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

＆＃13;

如何将“position：absolute”元素居中

29 个答案:

说明

解释

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

你有它！你的img应该居中！

您的代码：