如何居中“位置：绝对”元素

676

我在将属性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>
展开摘要

html  css  css-position  centering 
— 用户名
source
3
您需要给ul＃slideshow固定宽度...
— ptriek 2011年

Answers:

1186

如果设置了宽度，则可以使用：

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
— 巴罗兹
source
21
这是一个比其他答案更干净的答案！有什么警告吗？
— sbichenko 2013年
8
最聪明的答案。我刚刚检查了它，它可以在所有浏览器上使用。它不适用于IE8，但适用于IE> = 9
— Roger
13
请务必在IE中进行测试，如果元素在IE9中设置了“最大宽度”，此技巧将不起作用
— aphax
33
我个人更喜欢语法“ margin：0 auto; left：0; right：0;”。
— Hector Ordonez 2014年
58
除非设置了宽度，否则这完全是行不通的。如果您将text-align：center放在父元素上，并且在绝对位置的元素上没有背景，则将它似乎起作用，但是将背景放到它上面，您会发现它实际上占据了整个宽度。translateX（-50％）答案是正确的。
— Codemonkey '16
584

在不知道所定位的1个元素的width/的情况height下，仍然可以按以下方式对其进行对齐：

这里的例子

.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/ left属性上的百分比值是相对于父元素（正在创建包含块）的高度/宽度的。

虽然变换函数的百分比值是相对于元素本身的宽度/高度（实际上是指边界框的大小）。translate()

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

1.与position以外的元素static。即relative，absolute，fixed值。

— 哈希姆·夸拉米
source
65
这应该是最好的答案！！
— 克里斯·派恩
3
太棒了！最好的！
— Bhargav Ponnapalli 2015年
4
我到处都在寻找答案和一个很好的解释。这是最好的答案，也是一个很好的解释！谢谢。
— 迈克（Mike）
5
水平居中：position: absolute; left: 50%; transform: translateX(-50%);，垂直居中：position: absolute; top: 50%; transform: translateY(-50%);。
— КонстантинВан
1
刚才我发现该translate属性，无论其父级大小如何，都通过自身大小来转换元素。
— Farzin Kanzi
185

absolute在CSS中，居中定位的位置相当复杂。

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

}

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

— 书柜
source
5
测试时，当图像大小不同时，它不起作用，并且它们仍会彼此堆叠
— Ryan Gibbons
3
过于hack-ish（因为几乎总是在css中出现）。太棒了！:-)
— Dr.Kameleon
1
我被其他一些答案的巧妙性所吸引，但只有这个答案对我来说是可靠的。
— 克里斯·希夫豪尔
我遇到了与Ryan相同的问题，因此我尝试了“ baaroz”建议的第二个答案，它对我有用！！！而且它还支持不同的分辨率，因为我的主DIV的宽度为％，而不是PX
— UID 2014年
这实际上不是居中的。这更是位于右侧
— Artsicle
81

Div垂直和水平对齐中心 

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

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

— 塞宾·西蒙
source
1
我不知道为什么这没有得到更多的投票。据我所知，它适用于所有浏览器，包括移动浏览器。接缝在支撑方面更加可靠。简单，方便，干净...
— David Martins
1
这是一个更好的答案。它只需要一个div就能创建，并且有比用例更多的用例：left：50％; top：50％; 像以69票以上的票数解决方案
— Ian S
到目前为止最好的答案，任何人都应该检查一下！
— 阿卜杜·阿德尔
3
该元素还需要一个height集合才能起作用。
— alexbooots 2015年
55

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

width: 100%;
text-align: center;

这适用于图像和文本。

— cutez7boyz
source
48

如果您想将绝对元素居中

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

因此，我认为这是比我以前的解决方案更好的答案。由于您不必指定宽度和高度。它调整了元素本身的内容。

— 韦斯利·布莱恩·拉切纳尔（Wesley Brian Lachenal）
source
36

使“位置：绝对”元素居中。

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}
— 瓦达玛达法卡
source
32

这为我工作：

position: absolute;
left: 50%;
transform: translateX(-50%);
— 德普拉克
source
27

要使position：absolute属性居中，您需要设置div宽度的left：50％和margin-left：-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>
— 雷德纳斯
source
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;

— 穆罕默德·达耶（Mohammad Dayeh）
source
2
请在此代码为何起作用的背后提供一些评论或理由。代码答案本身将不可避免地被标记为删除。
— rayryeng 2014年
14

越简单越好：

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

然后，需要将img标记插入具有position：relative属性的标记中，如下所示：

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>
— 斯特凡·德·卢卡
source
8

可能是最短的

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;
— 克里斯
source
1
这非常棒，但只需垂直和水平居中，我们只需要使margin自动
— 生效
7

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

<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

— 约瑟夫
source
@ NabiK.AZ如果您不知道元素的宽度，则此示例很有用。在您的示例中，将宽度设置为div。
— joseantgv
5

在此处输入图片说明

我不确定您要完成什么，但是在这种情况下，只需添加width: 100%;您的ul#slideshow li意愿即可。

说明

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

— 康斯坦丁·卡尔巴佐夫（Konstantin Kalbazov）
source
5

使用 left: calc(50% - Wpx/2);W是元素的宽度对我有用。

— 朱利克斯
source
您如何确定W？
— Purplejacket
他说“图片”-理想的情况是，在为网络制作图片时，应该将图片制作成要使用的尺寸（而不是调整尺寸），以避免不必要的重量（如果制作大图片）小）或模糊（如果将小图像放大）。-如果您使用的是jQuery，然后也可以动态设置样式，则可以使用“ imageElement.naturalHeight”和“ imageElement.naturalWidth”，但这有点复杂。公平地讲，许多其他答案也需要您知道图像的宽度才能使它们的技术起作用。
— Julix
如果您实际上不清楚如何获得W，则可以在Chrome中使用CTRL + Shift + i（开发人员工具），然后使用CTRL + Shift + C（检查模式）将鼠标悬停在元素上并查看元素的宽度。您也可以决定要的宽度，然后在CSS中添加“ width：Wpx”。
— Julix
4

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

您的代码的修订版可以在底部找到。在我的修订中，我同时将列表和其中的图像居中。

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

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

注意：这些说明适用于任何DOM块元素，而不仅仅是img。

  1. 用div或其他标签（在您的情况下为li）包围图像。

    <div class="absolute-div">
  <img alt="my-image" src="#">
</div>

    注意：这些元素的名称并不特殊。

  2. 更改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>
展开摘要

我希望这可以帮到你。祝好运！

— D3RPZ1LLA
source
3

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

— Eveevans
source
您的小提琴使两个图像相互堆叠。
— Ryan Gibbons
3

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

 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>
展开摘要

— SantoshK
source
2

您可以这样尝试：

* { 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>
展开摘要

— 奇拉格·戴夫（Chirag Dave）
source
1 
#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;

有关第一个示例的更多详细信息，可以在这里找到：
使用CSS保持div的长宽比

— 玛丽安07
source
0

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

<!-- 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自动技术阅读这篇文章之前，要在内容的左侧创建一个菜单，我必须在右侧创建一个等宽的列以平衡它。不漂亮。谢谢！

— 迪恩·荨麻
source
-1 

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>
展开摘要

— 安特洛夫
source
1
这个答案只有代码。尽管这可能是正确的，但应该附带说明代码为何能回答OP的问题。代码不是Stack Exchnge上的“自我解释”。
— JBH
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.