1

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

此处接受的答案Easy way to center variable width divs in CSS is good for centering variable width,但它把其他所有东西都压低了：

通常我会这样做：

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

但这需要设定宽度。

（这是一个弹出的消息框，需要在其他文本的顶部居中。）

4

6 回答 6

0

如果您不知道块的宽度 

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

别的

div{margin:0 auto;display:block;}
于 2013-07-16T07:30:37.707 回答
0

利用：

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

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

于 2013-07-16T07:30:38.543 回答
0 
display: block;
margin: 0 auto;

=上下边距 0，左右边距 auto

工作小提琴

于 2013-07-16T07:31:05.473 回答
0

尝试这个

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

    }
于 2013-07-16T07:31:38.847 回答
0

您可以创建一个包装器：

#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属性以设置所需的垂直位置。

测试 JSFiddle

于 2013-07-16T07:35:10.607 回答
0

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

div {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
于 2017-04-02T22:43:24.300 回答