如何在div中居中放置绝对定位的元素？

我想在窗口的中心放置一个div（with position:absolute；）元素。但我在这样做时遇到了问题，因为宽度未知。

我尝试了以下CSS代码，但它需要调整，因为宽度是响应的。

.center {
  left: 50%;
  bottom: 5px;
}

我怎样才能做到这一点？

当前回答

我首选的定心方法：

position: absolute;
margin: auto;
width: x%

绝对块元素定位保证金自动左/右、上/下相同

一个JSFiddle在这里。

2014-03-27 21:15:02

其他回答

您可以将图像放置在一个div中，添加一个div id，并让该div的CSS具有文本align:center:

HTML格式：

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align: center;
}

2013-11-28 14:45:17

这是对我们有用的其他答案的混合：

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

2019-05-29 23:25:48

我想补充一下bobince的回答：

<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>
</body>

改进：///这使得水平滚动条不会在居中的div中出现大元素。

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

2013-01-28 18:58:14

一个简单的方法，对我来说，可以将一个未知宽度的块水平居中：

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

#block {
    display: inline-block;
}

文本对齐属性可以添加到#block规则集，以独立于块的对齐方式对齐其内容。

这在Firefox、Chrome、Internet Explorer、Edge和Safari的最新版本上有效。

2018-02-20 04:17:21

我首选的定心方法：

position: absolute;
margin: auto;
width: x%

绝对块元素定位保证金自动左/右、上/下相同

一个JSFiddle在这里。

2014-03-27 21:15:02

如何在div中居中放置绝对定位的元素？

推荐文章

最新文章

标签