如何将"position:absolute"元素居中
use*_*278 623 html css css-position centering
我有一个问题集中在属性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>baa*_*roz 1086
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
- 除非设置了宽度,否则这很简单.如果你在父级上有text-align:center并且在绝对定位元素上没有背景,那么它可能会起作用,但是在它上面放一个背景,你会看到它实际上占据了整个宽度.translateX(-50%)答案是正确答案. (52认同)
- 我个人更喜欢语法"margin:0 auto; left:0; right:0;" (32认同)
- 这是一个比其他人更清洁的答案!有什么警告吗？ (20认同)
- 一定要在IE中测试,如果元素在IE9中设置了"max-width",这个技巧就不起作用了 (12认同)
- 最聪明的答案.我刚检查过它,它适用于所有浏览器.它不适用于IE8,但适用于IE> = 9 (8认同)
- 不行!没有`width`它不起作用.Downvote (5认同)
- @TomSarduy叫我疯了但是,我更喜欢一行而不是两行. (3认同)
- 每当我遇到居中问题时,我都会看到这个答案,但它从来没有对我有用 (3认同)
- 如果不应用于块元素,可能还需要给出一些"宽度" (2认同)
Has*_*ami 529
如果不知道width/ height已定位的1个元件时,它仍然是可能的,如下所示对齐:
.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 Transform .(为简洁起见,省略了供应商前缀)
说明
添加top/ left的50%移动元件的顶部/左边距边缘到母体的中间,并translate()与该功能(负)的值-50%由它的尺寸的半移动元件.因此元素将位于中间.
这是因为top/ leftproperties 的百分比值是相对于父元素(创建包含块)的高度/宽度.
虽然变换函数的百分比值是相对于元素本身的宽度/高度(实际上它指的是边界框的大小).translate()
对于单向对齐,请使用translateX(-50%)或translateY(-50%)替代.
1.一个元素position以外的元素static.即relative,absolute,fixed值.
- 这应该是最好的答案!! (60认同)
- 这是正确的方法,欢迎来到2015! (6认同)
- 水平居中:`位置:绝对; 左:50%; transform:translateX(-50%);`,vertical centering:`position:absolute; 最高:50%; transform:translateY(-50%);`. (4认同)
- 太棒了!最好的! (3认同)
- 我到处寻找答案,并给出了一个很好的解释.这是最好的答案,也是一个很好的解释!谢谢. (3认同)
- 刚才我发现`translate`属性，根据**本身**的大小来翻译元素，不管其父元素的大小。 (2认同)
- 这是一个非常好的答案。这应该是最佳答案，它与宽度无关并且很强大。 (2认同)
boo*_*sey 178
absolute在CSS中居中定位的东西相当复杂.
ul#slideshow li {
position: absolute;
left:50%;
margin-left:-20px;
}
更改margin-left为(负)您尝试居中的元素宽度的一半.
- 在测试时,当图像尺寸不同时,它们不起作用,并且它们仍然相互堆叠 (5认同)
- 太黑了(因为它几乎总是用css证明).但太棒了!:-) (3认同)
- 我被其他一些答案的聪明所吸引，但只有这一个对我来说是可靠的。 (2认同)
Seb*_*mon 78
Div垂直和水平对齐中心
top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;
注意:元素应具有要设置的宽度和高度
- 该元素还需要一个"高度"设置才能生效. (3认同)
小智 52
一个简单的CSS技巧,只需添加:
width: 100%;
text-align: center;
这适用于图像和文本.
Wes*_*nal 47
如果你想要一个绝对元素的中心
#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 */
}
有了这个,我认为这比我以前的解决方案更好.因为您不必指定宽度和高度.这个它适应元素本身的内容.
- 使用 Flexbox 为我解决了这个问题 (2认同)
Vad*_*aka 31
以"position:absolute"元素为中心.
样品;
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
片段;
.your-element {
position: absolute;
left: 0;
right: 0;
text-align: center; // or this -> margin: 0 auto;
}
Dep*_*ake 30
这对我有用:
position: absolute;
left: 50%;
transform: translateX(-50%);
Red*_*nas 26
居中位置:你需要设置左边的绝对属性: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>
Vươ*_*iện 23
您可以使用“变换”属性：
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
Seb*_*mas 22
或者你现在可以使用带有位置绝对值的弹性盒：
.parent {
position: relative;
display: flex;
justify-content: center;
}
.child {
position: absolute;
}
- 这太被低估了。 (2认同)
Moh*_*yeh 16
<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;
- 请提供此代码工作原理的某些评论或理由.代码答案本身将不可避免地被标记为删除. (2认同)
Sté*_*uca 14
更简单,最好的:
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>
小智 10
正如许多其他人所说的那样 \xe2\xac\x87\xef\xb8\x8f
\n.element {\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(-50%, -50%);\n}\n应该管用。但请注意，.element必须位于具有position:relative; 的包装器中。（如果您不想将其放在整个 HTML 页面的中心）
\n仅供参考：我已经制作了一个用于 CSS 居中的伪库。我的初级开发人员需要它。所以，请随意检查一下。http://dev.solcode.net/centercss/
\n如果您不知道元素的宽度,可以使用以下代码:
<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
可能是最短的
position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
小智 6
您的图像未居中，因为您的列表项未居中；只有他们的文字居中。您可以通过将整个列表居中或将列表中的图像居中来实现所需的定位。
可以在底部找到代码的修订版本。在我的修订中，我将列表和其中的图像都居中。
事实是，您不能将位置设置为绝对的元素居中。
但是这种行为是可以模仿的！
注意：这些说明适用于任何 DOM 块元素，而不仅仅是 img。
用 div 或其他标签（在您的情况下是 li）包围您的图像。
Run Code Online (Sandbox Code Playgroud)<div class="absolute-div"> <img alt="my-image" src="#"> </div>注意：这些元素的名称并不特殊。
更改您的 css 或 scss 以提供 div 绝对定位和您的图像居中。
Run Code Online (Sandbox Code Playgroud).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 应该居中！
您的代码：
试试这个：
<div class="absolute-div">
<img alt="my-image" src="#">
</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;
}
我希望这可以帮到你。祝你好运！
我不确定你想要完成什么,但在这种情况下,只需添加width: 100%;你的ul#slideshow li遗嘱即可.
说明
的img标签是直列块元素.这意味着它们像文本一样以内联方式流动,但也具有像块元素一样的宽度和高度.在你的CSS中有两个text-align: center;规则应用于(<body>和#slideshowWrapper冗余btw)这使得所有内联和内联块子元素都在它们最接近的块元素中居中,在你的代码中这些是li标签.width: 100%如果它们是静态流(position: static;),则所有块元素都是默认值.问题在于,当你告诉li标签时position: absolute;,你将它们从正常的静态流中取出,这导致它们缩小它们的大小以适应它们的内部内容,换句话说它们会"失去"它们的width: 100%属性.