How to center variable length text in absolutely positioned element in div?

Question

I do know the solutions from how to center absolute positioned element in div. But my situation is, instead of a fixed length div, I have a variable length text.

I want the div increase length with text while keep centered. I guess I can use js to programmatically change the width, but that sounds too hacky, is there a pure css solution?

Example: 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>

If the text can fit with one line, then one line. If not, multiple lines is fine. — Tianyun Ling, Jun 13 '17 at 20:50
Possible duplicate of [CSS Center text (Horizontal and Vertical) inside a DIV block](https://stackoverflow.com/questions/5703552/css-center-text-horizontal-and-vertical-inside-a-div-block) — victor, Jun 13 '17 at 20:52

Joseph Marikle · Accepted Answer · 2017-06-13T21:00:53.880

I haven't fully tested this on multiple browsers, but you could potentially use the left:50% and transform:translate(-50%) trick along with a margin-right:-50%. It feels weird writing all of those out together, but it should cover everything.

.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>

Tests:

This method works on most modern browsers at at least the latest version. The only notable exception would be Safari 8 I think.

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

score 2 · Answer 2 · answered Jun 13 '17 at 20:54

Using a flexbox will do the trick. I took the liberty to maximize the width of the inner div equal to the outer 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>

score 0 · Answer 3 · answered Jun 13 '17 at 20:50

0

Use the text-align attribute.

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

answered Jun 13 '17 at 20:50

victor

1,573
11
23

score 0 · Answer 4 · answered Jun 13 '17 at 20:54

0

Just use display: table and width: auto;

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

answered Jun 13 '17 at 20:54

Rüzgar

947
9
20

score 0 · Answer 5 · answered Jun 13 '17 at 21:19

I would use flexbox here, as it's the easiest and most flexible option for you. Also, rather than using "width", you may want to consider using "max-width". This means that below a certain point, your div will resize with the text. Once it hits your set maximum, it will stop growing, and constrain the text inside the box.

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>

How to center variable length text in absolutely positioned element in div?

5 Answers5

Tests: