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

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

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

更简单，最好的：

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 4

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

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

可能是最短的

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

Answer 6

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

Explanation

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

Answer 7

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

Answer 8

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

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

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

But this behavior can be imitated!

注意：这些指令适用于任何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!

你的代码：

试试这个：

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 9

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

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

 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 11

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

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

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

Answer 12

在不知道locate1元素的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。（为简洁起见，省略了供应商前缀）

说明

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

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

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

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

1.除了position之外的static元素。即relative，absolute，fixed价值观。

Answer 13

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

你可以这样试试：

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

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

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

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

Answer 17

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>

Answer 18

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

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

}

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

Answer 19

Div垂直和水平对齐中心

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

注意：元素应具有要设置的宽度和高度

Answer 20

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

width: 100%;
text-align: center;

这适用于图像和文本。

Answer 21

如果你想要一个绝对元素的中心

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

这对我有用：

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

Answer 23

居中一个位置：你需要设置左边的绝对属性：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 24

以“position：absolute”元素为中心。

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

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

问题描述投票：563回答：24

24个回答

Explanation

But this behavior can be imitated!

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

你的代码：

说明

最新问题

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

问题描述 投票：563回答：24

24个回答

Explanation

But this behavior can be imitated!

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

你的代码：

说明

最新问题

问题描述投票：563回答：24