How to Center in CSS (2015)

Centering in CSS is &quot;solved&quot; problem if your &quot;worst&quot; browser to support is IE11. Flexbox does the job there.<p>However, there are still couple of common tasks that are pain&#x2F;hard&#x2F;impossible to do with just CSS.<p>Recently I learned that after all this years you still need to use JS to get css animation for dynamic height (&quot;height:auto&quot;) of elements.<p>And there is no progress in fixing it at CSS standard level. It&#x27;s just sad... <a href="https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;626" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;w3c&#x2F;csswg-drafts&#x2F;issues&#x2F;626</a> <a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;3508605&#x2F;how-can-i-transition-height-0-to-height-auto-using-css" rel="nofollow">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;3508605&#x2F;how-can-i-transi...</a> <a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;3508605&#x2F;how-can-i-transition-height-0-to-height-auto-using-css" rel="nofollow">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;3508605&#x2F;how-can-i-transi...</a>

12 years ago at W3C styles I&#x27;ve proposed to solve it as simple as this:<p><pre><code> .in-the-middle { width:max-content; height:auto; margin:*; &#x2F;&#x2F; &quot;coils&quot; on all sides moving it &#x2F;&#x2F; to the middle of free space in container } </code></pre> So these tons of tools, essays and doctoral dissertations on &quot;how to center stuff&quot; would not be needed.<p>Here is the story: <a href="https:&#x2F;&#x2F;terrainformatica.com&#x2F;2018&#x2F;12&#x2F;11&#x2F;10-years-of-flexboxing&#x2F;" rel="nofollow">https:&#x2F;&#x2F;terrainformatica.com&#x2F;2018&#x2F;12&#x2F;11&#x2F;10-years-of-flexboxi...</a>

Pinboard tells me, I &quot;previously saved april 2015&quot;. So I bookmarked this more than five years ago.<p>Back then, this site was addressing a big problem and, to some degree, it&#x27;s still a confounding problem sometimes.<p>So high-five to its creator. And to the HN haterz in these comments, take a hike.

This is a straw man.<p>Today you can simply use flexbox on the container:<p><pre><code> display: flex; justify-content: center; &#x2F;&#x2F; horizontal align-items: center; &#x2F;&#x2F; vertical </code></pre> Doesn&#x27;t work in IE without a JS polyfill (which is available), but has worked in all other browsers for six years or so.

A wise man once said (me): ill use &lt;center&gt; until the end of time and thy browsers shall support it. (did of course learn the new and improved ways to qualify the ignorance)

Having to still support IE 11 for most projects, I really like the following:<p>div { position: absolute; right: 50%; bottom: 50% transform: translate(50%, 50%); }

Here&#x27;s what I&#x27;ve been doing for years (The &lt;div&gt; can be any element, like &lt;ul&gt;):<p>&lt;div id=&quot;wrapper&quot; style=&quot;text-align:center&quot;&gt; &lt;div id=&quot;wrapped&quot; style=&quot;display:table;margin-left:auto;margin-right:auto;text-align:left&quot;&gt;&lt;&#x2F;div&gt; &lt;&#x2F;div&gt;<p>WFM YMMV

<p><pre><code> &lt;div class=element&gt;&lt;&#x2F;div&gt; &lt;style&gt; .element{ position:absolute; width:500px; height:500px; left:50%; top:50%; margin-top:-250px; margin-left:-250px; } &lt;&#x2F;style&gt;</code></pre>

I was explaining this to a normal person the other day, and maybe I&#x27;m doing it wrong, but it was impossible not to make it sound like we are weanies. I mean complete knee-biting berks.<p>&quot;What do you mean <i>centering</i> was <i>hard?</i>&quot;<p>&quot;Not was, still is.&quot;<p>&quot;...&quot;<p>&quot;yeah. ...&quot;

It doesn&#x27;t solve vertical centering, but I am secretly still a fan of the center-tag. Just does what it&#x27;s name implies in most situations. I still don&#x27;t get why its avoided like the plague.

Silly human! One does not simply center in CSS.

One which I came across recently, a little smaller than the usual flex solution:<p>.v-h-center { display: grid; place-content: center; }

I am not into the CSS game anymore, if anything needs to be done I&#x27;d just go with whatever widgets any CSS framework offers, but why has it been so hard for so long to center things with CSS (I believe flexbox finally fixed it) ?