如何以“位置：绝对”元素为中心
我有一个问题居中的属性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>
position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0;
在不知道定位1元素的width / height下，仍然可以如下alignment：
在这里的例子
.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%) */ }
值得注意的是，IE9及以上版本支持 CSS转换 。 （供应商前缀为简洁起见）
说明
添加50%的顶部/左侧将元素的顶部/左侧边缘边缘移动到父元素的中间， translate()函数的（负）值为-50%将元素移动其大小的一半。 因此元素将被放置在中间。
这是因为top / left属性的百分比值相对于父元素的高度/宽度（正在创build一个包含块）。
translate() 转换函数的百分比值是相对于元素本身的宽度/高度（实际上是指边界框的大小） 。
对于单向alignment，请使用translateX(-50%)或translateY(-50%) 。
1.具有非static position的元素。 即relative ， absolute ， fixed值。
将absolute定位的东西集中在CSS中是相当复杂的。
ul#slideshow li { position: absolute; left:50%; margin-left:-20px; }
将margin-left更改为（负）您尝试居中的元素宽度的一半。
Div垂直和水平alignment中心
top: 0; bottom: 0; margin: auto; position: absolute; left: 0; right: 0;
注：元素应该有宽度和高度来设置
一个简单的CSS技巧，只需添加：
width: 100%; text-align: center;
这适用于图像和文字。
如果你想中心一个绝对的元素
#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 */ }
有了这个，我认为这是一个比我以前的解决scheme更好的答案。 既然你不必指定宽度和高度。 这个它适应元素本身的内容。
以一个位置为中心：绝对属性，你需要设置左：50％，余量：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>
<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;时为position: absolute元素left: 0; right: 0; 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>
这对我工作：
position: absolute; left: 50%; transform: translateX(-50%);
如果你不知道元素的宽度，你可以使用这个代码：
<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
我不知道你想完成什么，但在这种情况下，只是增加width: 100%; 你的ul#slideshow li会做的伎俩。
说明
img标签是内嵌块元素。 这意味着它们像文本一样内联，而且像块元素一样具有宽度和高度。 在你的CSS有两个text-align: center; 规则应用于<body>和#slideshowWrapper （这是多余的顺便说一句），这使得所有的内联和内联块子元素居中在他们最接近的块元素，在你的代码这些都是li标签。 所有块元素的width: 100%如果它们是静态stream（ position: static; ），这是默认的。 问题是，当你告诉li标签position: absolute; ，你把它们从正常的静态stream程中拿出来，这就使得它们缩小尺寸以适应内在的内容，换句话说，它们就会“失去”它们的width: 100%属性。
使用left: calc(50% - Wpx/2); 其中W是元素的宽度为我工作。
相对对象内的绝对对象是相对于其父对象的，这里的问题是你需要一个容器#slideshowWrapper的静态宽度，其余的解决scheme就像其他用户所说的
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; }
这里是中心元素的简单和最好的解决scheme，“position：absolute”
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>
绝对位置将其从stream中移出，并将其置于0x0处（最后一个块元素具有绝对位置或相对位置）。
我不确定你到底想要达到什么目的，最好是把li设定在一个position:relative ，这个position:relative而这个position:relative是以它们为中心的。 鉴于您当前的CSS
您的图片不居中，因为您的列表项目不居中; 只有他们的文字居中。 您可以通过将整个列表居中或将图像居中在列表中来实现所需的定位。
您的代码的修订版本可以在底部find。 在我的修订中，我把清单和图像放在它的中间。
事实是，你不能将一个位置设置为绝对的元素居中。
但是这个行为可以被模仿！
注意：这些指令可以用于任何DOM块元素，而不仅仅是img。
1）用div或其他标签（在你的情况下）包围你的图像。
<div class="absolute-div"> <img alt="my-image" src="#"> </div>
注意：给这些元素的名字并不特别。
2）改变你的CSS或SCSS给予绝对定位和您的图像居中。
.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 // ie - 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应该居中！
你的代码：
试试这个：
<style type="text/css"> body { text-align: center; text: inherit; } #slideshow { list-style: none; margin-top: 50px; width: 800px; // alter to taste margin: 0 auto } #slideshow li { position: absolute; } #slideshow img { border: 1px solid #ccc; padding: 4px; height: 450px; 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; } </style> <body> <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> </body>
我希望这可以帮到你。 祝你好运！
#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;
关于第一个例子的更多细节可以在这里find： 保持div与CSS的纵横比
似乎正在发生的是有两个解决scheme; 以边距为中心，以位置为中心。 两者都可以正常工作，但是如果要绝对定位与此居中元素相对的元素，则需要使用绝对位置方法，因为第二个元素的绝对位置默认为定位的第一个父元素。 像这样：
<!-- 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一个宽度相同的列来平衡它。 不漂亮。 谢谢！
使用margin-left: x%; 其中x是元素宽度的一半。
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>
