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

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

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

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

我怎样才能做到这一点？

当前回答

我只是想补充一句，如果有人想用一个div标记来完成，那么这里是解决方法：

宽度为900px。

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

在这种情况下，应该事先知道宽度。

2012-08-31 09:56:17

其他回答

在寻找解决方案时，我得到了前面的答案，可以将内容以Matthias Weiler的答案为中心，但使用文本对齐：

#content{
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}

它与谷歌Chrome和Firefox配合使用。

2013-05-29 01:36:45

我想补充一下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

尽量不要使用CSS的阴暗面。避免使用负值作为边距。我知道有时候你会被迫做一些糟糕的事情，比如左边距：-450px，但你可能会做一些右边距：450px。这只是我的工作方式。

2013-11-28 14:34:34

这对我有用：

<div class="container><p>My text</p></div>

.container{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

2016-05-24 12:25:27

Flexbox可用于对绝对定位的div。

display: flex;
align-items: center;
justify-content: center;

.相对{宽度：275px；高度：200px；背景：皇家蓝；颜色：白色；边距：自动；位置：相对；}.绝对块{位置：绝对；高度：36px；背景：橙色；填充：0px 10px；底部：-5%；边框：1px实心黑色；}.居中文本{显示：柔性；对齐内容：中心；对齐项目：居中；盒子阴影：1px 2px 10px 2px rgba（0、0、0和0.3）；}<div class=“relative center text”>相对块（Relative Block）绝对块</div></div>

2019-02-03 02:20:06

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

推荐文章

最新文章

标签