Question

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

这里接受的答案Easy way to center variable width divs in CSS适用于居中可变宽度，但它会推动其他所有内容：

通常我会这样做：

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

但这需要设定宽度。

（这是一个弹出的消息框，需要以其他文本为中心。）

Answer 1

如果您不知道块的宽度

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

其他

div{margin:0 auto;display:block;}

Answer 2

使用：

div {
    position:absolute;
    width: auto;
    left:50%;
}

http://jsfiddle.net/Hive7/93mAj/2

Answer 3

display: block;
margin: 0 auto;

= 上下边距0 ，左右边距自动

Working Fiddle

Answer 4

试试这个

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

    }

Answer 5

您可以创建一个包装器：

#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

Answer 6

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

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

中心div具有可变宽度，位于其他内容之上

6 个答案: