如何將div中絕對定位元素中的可變長度文本居中？

Question

我知道如何在div中居中絕對定位元素的解決方案。 但我的情況是，我有一個可變長度的文本，而不是固定長度的div。

我希望div增加長度與文本同時保持居中。 我想我可以使用js以編程方式更改寬度，但這聽起來太hacky，是否有一個純粹的CSS解決方案？

示例： http ： //jsfiddle.net/tling/3KTUM/307/

 .outer_div { background-color: #999; border: 0px solid black; width: 300px; height: 200px; float: left; position: relative; } .inner_div { position: absolute; background-color: #BBB; width: 100px; /*adjustable width with text ?*/ height: 50px; color: black; margin: 0 auto; right: 0; left: 0; } 

 <div class="outer_div"> <div class="inner_div">Text Text Text</div> </div> 

Answer 1

我沒有在多個瀏覽器上對此進行全面測試，但您可能會使用left:50%和transform:translate(-50%)技巧以及margin-right:-50% 。 把所有這些寫在一起感覺很奇怪，但它應該涵蓋一切。

 .outer_div { background-color: #999; border: 0px solid black; width: 300px; height: 200px; /*float:left; */ position: relative; } .inner_div { position: absolute; background-color: #BBB; display:inline-block; color:black; left:50%; margin-right: -50%; transform: translateX(-50%); } 

 <div class="outer_div" style="" > <div class="inner_div">Text Length May Change </div> </div> <br> <div class="outer_div" style="" > <div class="inner_div">Change </div> </div> <br> <div class="outer_div" style="" > <div class="inner_div">Text Length May Change Text Length May Change </div> </div> 

測試：

此方法至少在最新版本的大多數現代瀏覽器上都有效。 我認為唯一值得注意的例外是Safari 8。

https://www.browserstack.com/screenshots/0d780368ad54ecdd31cf5c62e70ff79f2b9a5a11

Answer 2

使用flexbox可以解決問題。 我冒昧地將內部div的寬度最大化等於外部div。

 .outer_div { background-color: #999; border: 0px solid black; width: 300px; height: 200px; display: flex; justify-content: space-around; align-items: center; } .inner_div { background-color: #BBB; width: auto; max-width: 300px; /*adjustable width with text ?*/ height: 50px; color: black; } 

 <div class="outer_div"> <div class="inner_div">Text Text Text</div> </div> 

Answer 3

使用text-align屬性。

https://www.w3schools.com/cssref/pr_text_text-align.asp

Answer 4

只需使用display: table和width: auto;

.inner_div {
    position: relative;
    background-color: #BBB;
    width: auto;
    height: 50px;
    color: black;
    margin: 0 auto;
    display: table;
}

Answer 5

我會在這里使用flexbox，因為它是最簡單，最靈活的選擇。 另外，您可能需要考慮使用“max-width”，而不是使用“width”。 這意味着在某個點之下，您的div將使用文本調整大小。 一旦達到設定的最大值，它將停止增長，並限制框內的文本。

有關flexbox的更多信息。

 .outer_div { background-color: #999; border: 0px solid black; width: auto; max-width: 300px; height: 200px; display: flex; justify-content: center; align-items: center; /* Vertical alignment, use "flex-start" for top align */ } .inner_div { background-color: #BBB; width: auto; max-width: 300px; /* Max-width will prevent uncontrolled growth */ height: 50px; color: black; } 

 <div class="outer_div"> <div class="inner_div">Variable text length.</div> </div>