内容改变时重新居中div

Question

我有一个以屏幕中间为中心的div。我需要将一些文本传递给div，文本将有不同的长度。问题是，当我将文本传递给div时，它会改变大小但不会保持居中。这是一个显示问题的JSFiddle。

我目前将div放在这个中心：

position: absolute;
top: 50%;
left: 50%;

Answer 1

你的div没有居中。现有的定位位于div的左上角。

试试这个：

#divError{
            position: absolute;
            top: 50%;
            left: 50%;
             transform:translate(-50%,-50%);
}

JSfiddle Demo

Answer 2

添加以下行：

#divError{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);

http://jsfiddle.net/h0d097vp/3/

Answer 3

你可以设置恒定宽度吗？如果是这样，你的答案JSFiddler

刚刚添加

width: 100px;
right: 0;
left: 0;
margin: auto;

Answer 4

你的div也没有在开头居中。 left：50％表示diff以50％开始，这意味着div的开头位于页面的中心。 当div的宽度为200px时，仍然只有起点位于中心。 您可以给div一个固定的宽度，然后添加一半宽度的负边距，这样div就会真正位于页面的中心。

像

#divError{
     width: 200px;
     margin-left: -100px;            
}