內容更改時將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演示

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

Answer 5

當使用top和left它們將定位在給定位置的任意一側。 left: 50%總是將最左側直接定位在50％標記處。 這不是中心，而是從div的左側開始。 top: 50%也會發生同樣的情況top: 50% 。 為了使用top和left您需要知道整體的寬度和高度，並從各自的top和left減去其值的一半（例如，left：calc（50％-（[元素的寬度] / 2））。由於您使用的是動態內容，因此無法知道高度或寬度（除非您將其設置為靜態）。

所以，你可以做什么？ 有幾種方法，但目前我最喜歡的是新方法。 它稱為flexbox。 它的支持是體面的 。 CSS技巧也有一個不錯的片段 。

將元素垂直和水平居中的相關代碼將如下所示：

 $(document).ready(function() { $("button").click(function() { $.get("http://lorem.mannfolio.com/", function(data) { var lorem = data.split("\\n\\n"); $(".centered").html(lorem[0]); }); }); }); 

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } .container { display: flex; justify-content: center; align-items: center; height: 100%; border: 1px solid black; } button { position: fixed; top: 10px; left: 10px; } 

 <button>Change text</button> <div class="container"> <div class="centered">I'm centered No matter what you put in me.</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>