我有一个问题集中在一个属性 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>

24 回答

3

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

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

看看http://jsfiddle.net/rtgibbons/ejRTU/玩吧

回复于 2024-05-06T05:17:42+08:00

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

回复于 2024-05-06T05:17:42+08:00

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

解释

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

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

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

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

1.具有静态位置的元素 . 即相对，绝对，固定值 .
回复于 2024-05-06T05:17:42+08:00
25
在CSS中居中定位的内容相当复杂 .
```
ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}
```
将 margin-left 更改为（负）您尝试居中的元素宽度的一半 .
回复于 2024-05-06T05:17:42+08:00
23
Div vertically and horizontally aligned center
```
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
```
注意：元素应具有要设置的宽度和高度
回复于 2024-05-06T05:17:42+08:00
446
一个简单的CSS技巧，只需添加：
```
width: 100%;
text-align: center;
```
这适用于图像和文本 .
回复于 2024-05-06T05:17:42+08:00

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

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

Update as of December 15, 2015

好吧，几个月前我又学到了另一个新技巧 . 假设您有一个相对父元素 .

这是你的绝对元素 .

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

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

回复于 2024-05-06T05:17:42+08:00

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

回复于 2024-05-06T05:17:42+08:00

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

回复于 2024-05-06T05:17:42+08:00

956

这对我有用：

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

回复于 2024-05-06T05:17:42+08:00

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

回复于 2024-05-06T05:17:42+08:00

更简单，最好的：

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>

回复于 2024-05-06T05:17:42+08:00

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

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

        tum te tum
    </div>
</div>

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

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

回复于 2024-05-06T05:17:42+08:00

167

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

添加这些

left: 0%;
right: 0%;
text-align: center;

或者这些

left: 0%;
right: 0%;
margin: 0 auto;

element ：绝对位置

.element {
  position: absolute;
}

元素 centered

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

回复于 2024-05-06T05:17:42+08:00

1

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

解释

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

回复于 2024-05-06T05:17:42+08:00
3

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

回复于 2024-05-06T05:17:42+08:00

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.

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

事实是你将一个位置设置为绝对的元素作为中心 .

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

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

I hope this was helpful. Good luck!

回复于 2024-05-06T05:17:42+08:00

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

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>

回复于 2024-05-06T05:17:42+08:00

#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

回复于 2024-05-06T05:17:42+08:00

-1

你可以这样试试：

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

回复于 2024-05-06T05:17:42+08:00

可能是最短的

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

回复于 2024-05-06T05:17:42+08:00

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

<!-- 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技术，在我的内容左侧 Build 一个菜单，我必须在右边 Build 一个相同宽度的列来 balancer 它 . 不漂亮 . 谢谢！

回复于 2024-05-06T05:17:42+08:00

4

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

回复于 2024-05-06T05:17:42+08:00

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>

回复于 2024-05-06T05:17:42+08:00

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

24 回答

解释

解释

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

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

您的代码：

相关问题