CSS：如何使用動態寬度在中心放置div

我有一個位於屏幕中心的彈出窗口，其中包含：transform: translate(-50%, -50%);和position: absolute。不幸的是，由於某種原因，我的寬度是固定的，並且不是動態的（基於內容）。CSS：如何使用動態寬度在中心放置div

這是我的jsfiddle：https://jsfiddle.net/qh13mnaf/1/

爲什麼彈出窗口的寬度是不是更大？

來源

2016-03-04 Hristo Eftimov

因爲你給'.tabs'和'.tabs-content'固定的寬度。 – NiZa

即使只有沒有任何html的文本也不能很好地工作。使用'width'屬性是可以的。例如：[https://jsfiddle.net/qh13mnaf/2/](https://jsfiddle.net/qh13mnaf/2/）據我所知，寬度是基於設備，但在我的平板電腦上，我必須屏幕末端和彈出窗口之間有很多空間。如何使彈出窗口的寬度成爲最長元素的寬度：例如標題 –

您能夠將jQuery添加到您的代碼中嗎？雖然：你希望div是水平和垂直對齊的，儘管準確的大小需要顯示內容（不是更大）？ –

解決方案：

套裝.popup-content { width: 100%; }和嵌套另一個DIV中的內容display: table; margin: 0 auto;

JSFIDDLE DEMO

說明：

你的心DIV .popup-content具有屬性left: 50%，這意味着它會將其父項的左半部留空。這意味着，div將自己的寬度設置爲其剩餘父級的所有寬度，儘管該寬度將爲50％。

例如，如果您將.popup-content的寬度設置爲left: 30%，則將使用其父寬度的70%。

你的第二個CSS屬性transform: translate(-50%, -50%);只會移動整個div，而不會改變（或影響）其寬度。

CSS推導：

我猜你要根據需要和爲軸心的，水平和垂直的股利只有那麼大。如果這就是正確的，繼承人一步一步的解決方案：

由於你的CSS做定心它垂直的一個好工作，你可以保留這一點，而只是它的寬度設置爲100％：

.popup-content { 
    position: absolute; 
    top: 50%; 
    width: 100%; 
    transform: translate(0%, -50%); 
}

接下來你可以嵌套另一個DIV中的內容使用水平display: table;

.popup-center-horizontal { 
    display: table; 
    margin: 0 auto; 
    background: red; 
}

可以檢查工作演示在這裏JSFIDDLE DEMO居中。

如果你不想讓你的div來達到的一面，你可以設置一個max-width限制其大小，例如：

.popup-center-horizontal { 
    max-width: 90%; 
}

在IE8 +作品。

來源

2016-03-04 13:43:09

這正是我想要的:)非常感謝你的大力支持！ –

CSS：如何使用動態寬度在中心放置div

回答

相關問題