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

乐米亚2020-03-17

我在将属性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>

西门逆天2020/03/17 15:17:33

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>

猪猪西门2020/03/17 15:17:33

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

神奇阿良Jim2020/03/17 15:17:33

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

<!-- 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自动技术在内容的左侧构建了一个菜单，然后不得不在右侧构建一个等宽的列以平衡它。不漂亮。谢谢！

番长Green2020/03/17 15:17:33

或者您现在可以将flex box与绝对位置一起使用：

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

Jim猪猪2020/03/17 15:17:32

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

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

神乐Mandy米亚2020/03/17 15:17:32

绝对位置将其从流中移出，并将其放置到父对象的0x0处（最后一个块元素具有绝对位置或相对位置）。

我不确定您要完成的目标到底是什么，最好将li设置为a position:relative并将其居中。鉴于您当前的CSS

查看http://jsfiddle.net/rtgibbons/ejRTU/进行操作

Tony西里2020/03/17 15:17:32

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

Harry凯2020/03/17 15:17:32

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

伽罗JinJin宝儿2020/03/17 15:17:32

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

说明

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

LGil泡芙2020/03/17 15:17:32

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

<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

阿飞Pro2020/03/17 15:17:32

可能是最短的

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

卡卡西斯丁2020/03/17 15:17:32

越简单越好：

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>

Tom卡卡西村村2020/03/17 15:17:32

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

乐西门2020/03/17 15:17:31

这为我工作：

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

LEY神无2020/03/17 15:17:31

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

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

十三SamJim2020/03/17 15:17:31

如果要使绝对元素居中

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

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

老丝Davaid2020/03/17 15:17:31

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

width: 100%;
text-align: center;

这适用于图像和文本。

泡芙小卤蛋Tom2020/03/17 15:17:31

Div垂直和水平对齐的中心

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

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

猪猪Mandy2020/03/17 15:17:31

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

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

}

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

阿飞JinJin2020/03/17 15:17:31

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

说明

Adding top/left of 50% moves the top/left margin edge of the element to the middle of the parent, and translate() function with the (negative) value of -50% moves the element by the half of its size. Hence the element will be positioned at the middle.

This is because a percentage value on top/left properties is relative to the height/width of the parent element (which is creating a containing block).

While a percentage value on translate() transform function is relative to width/height of the element itself (Actually it refers to the size of bounding box).

For unidirectional alignment, go with translateX(-50%) or translateY(-50%) instead.

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

凯村村2020/03/17 15:17:31

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

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

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer