title: How can I get half the value of max-content width?
body: <p>I'm showing a tooltip and I want it to be centered in the parent, no matter how long it is.</p>
  
  <p>I was thinking that maybe I could use <code>calc()</code> with <code>max-content</code> but apparently that is not how it works.</p>
  
  <pre><code>*[tooltip] {
      position: relative;
      &amp;:hover {
          &amp;:after {
              content: attr(tooltip);
              display: block;
              position: absolute;
              transform: translateX(-50%);
              background: rgba(0, 0, 0, 0.8);
              color: white;
              padding: 6px 12px;
              border-radius: 4px;
              position: absolute;
              top: 50px;
              left: 0px;
              width: max-content;
              font-weight:bold;
              font-size:0.9em;
              text-align:center;
              margin-left: calc(max-content / 2);
          }
      }
  }
  </code></pre>
  
  <p>I can always use 100% as width but then it'll always be the width of the parent, and that is sometimes too little and other times it is too much; hence I use <code>max-content</code>.</p>
  
  <pre><code>&lt;div tooltip="Hello World"&gt;Hover me.&lt;/div&gt;
  </code></pre>
  
  <p>How can I solve this dilemma <strong>without using JS</strong>?</p>
  
  <p>EDIT:</p>
  
  <p>Here's an image of how it should look.</p>
  
  <p><a href="https://i.stack.imgur.com/NPHwL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NPHwL.png" alt="enter image description here"></a></p>
  
  <p>No matter how much text is in the tooltip, it should always be centered in the middle. If I use the 100% width approach it will stay in the middle but will always be of the same width, causing the words to break down onto new rows.</p>
  
  <p>By using max-content the width is always different to the other tooltips, which is why it becomes hard for me to center it.</p>