css - 以可变宽度居中 div，位于其他内容之上

Question

如何水平居中需要位于其他元素之上的可变宽度元素？

此处接受的答案 Easy way to center variable width divs in CSS有利于居中可变宽度，但它会将其他所有内容推低:

通常我这样做:

position:absolute;
width:200px;
left:50%;
margin-left:-100px;

但这需要设置宽度。

(用于弹出的消息框，需要居中于其他文本之上。)

Answer 1

你可以创建一个包装器:

#mydiv-wrapper {
    width: 75%;
    position: fixed;
    left: 50%;
    top: 50px;
    margin: 0 0 0 -37.5%;
    z-index: 10000;
    text-align: center;
}

这样您就可以在其中插入另一个 div，而无需设置其宽度。宽度将自动计算。

#mydiv {
    display: table;
    margin: auto;
}

这不会将其他元素向下推(感谢 position: absolute)，并且会出现在其他元素之上(就像一个警报，只是为了清楚起见)。只需更改 top 属性即可设置所需的垂直位置。

Test JSFiddle