如何在 div 中的绝对定位元素中居中可变长度文本？答案

【问题标题】：How to center variable length text in absolutely positioned element in div?如何在 div 中的绝对定位元素中居中可变长度文本？
【发布时间】：2017-11-15 19:18:43
【问题描述】：

我确实知道how to center absolute positioned element in 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>

【问题讨论】：

您是否希望文本始终为一行？
如果文本可以容纳一行，那么一行。如果没有，多行就可以了。
CSS Center text (Horizontal and Vertical) inside a DIV block的可能重复

标签： html css

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

使用text-align 属性。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

我会在这里使用 flexbox，因为它对您来说是最简单、最灵活的选择。此外，您可能需要考虑使用“最大宽度”，而不是使用“宽度”。这意味着在某个点以下，您的 div 将随文本调整大小。一旦达到您设置的最大值，它将停止增长，并限制框内的文本。

More information on 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>

【讨论】：