Css 中心div，宽度可变，位于其他内容的顶部

如何将需要位于其他元素顶部的可变宽度元素水平居中

这里公认的答案适用于可变宽度居中，但它会降低其他方面的要求：

通常我会：

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

但这需要设置宽度

---

（用于弹出的消息框，需要在其他文本顶部居中。）

如果您不知道块的宽度

  body /*or parent div selector*/{text-align:center};
    div{display:inline-block};

否则

使用：

=上下页边距0以及左右页边距自动

试试这个

    .div1{
    position:absolute;
    width:200px;
    left:50%;
    margin-left:-100px;
        background-color:red;
      text-align:Center;

    }

---

您可以创建一个包装器：

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

这不会将其他元素向下推（由于

位置：绝对

），并且会显示在其他元素的顶部（为了清楚起见，类似于警报）。只需更改

top

属性即可设置所需的垂直位置

---

如果您不想要包装器div，我发现这个解决方案是最好的。这会将元素的左边缘定位到父元素的中间，然后将其向后移动元素宽度的一半

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

---

尝试将左右边距设置为

auto

他不希望div向下推其他元素。。他需要一个绝对定位，或者至少是一个解决方案，将元素从流程中移除。这个解决方案有效：）我还可以在#mydiv上设置背景、最大宽度等。此外，我还更改了位置：固定为绝对。这样它就可以随页面滚动。取决于所需的行为，这是另一个选项。这将使div的左边框居中，而不是div的中间。因此div不会居中，而是稍微向右（请参见）

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

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

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