
How to Center in CSS (2015) - HeinZawHtet
http://howtocenterincss.com/
======
mpawelski
Centering in CSS is "solved" problem if your "worst" browser to support is
IE11. Flexbox does the job there.

However, there are still couple of common tasks that are pain/hard/impossible
to do with just CSS.

Recently I learned that after all this years you still need to use JS to get
css animation for dynamic height ("height:auto") of elements.

And there is no progress in fixing it at CSS standard level. It's just sad...
[https://github.com/w3c/csswg-drafts/issues/626](https://github.com/w3c/csswg-
drafts/issues/626) [https://stackoverflow.com/questions/3508605/how-can-i-
transi...](https://stackoverflow.com/questions/3508605/how-can-i-transition-
height-0-to-height-auto-using-css)
[https://stackoverflow.com/questions/3508605/how-can-i-
transi...](https://stackoverflow.com/questions/3508605/how-can-i-transition-
height-0-to-height-auto-using-css)

~~~
pedrogpimenta
There are some tricks you can use if you know the max possible height your
element can have, but it's not great, yeah.

Edit: Oh, I just saw that the stackoverflow question you linked has this for
the accepted answer :)

~~~
Wowfunhappy
The problem is the animation speed is overly fast if you're at less than that
maximum height.

------
c-smile
12 years ago at W3C styles I've proposed to solve it as simple as this:

    
    
       .in-the-middle {
         width:max-content;  
         height:auto;
         margin:*; // "coils" on all sides moving it 
                   // to the middle of free space in container
       }
    

So these tons of tools, essays and doctoral dissertations on "how to center
stuff" would not be needed.

Here is the story: [https://terrainformatica.com/2018/12/11/10-years-of-
flexboxi...](https://terrainformatica.com/2018/12/11/10-years-of-flexboxing/)

------
stblack
Pinboard tells me, I "previously saved april 2015". So I bookmarked this more
than five years ago.

Back then, this site was addressing a big problem and, to some degree, it's
still a confounding problem sometimes.

So high-five to its creator. And to the HN haterz in these comments, take a
hike.

~~~
scrumbledober
Saw the link was already clicked and was curious. I've still got this page
bookmarked in chrome from when I was first starting out as a web developer.

------
_bxg1
This is a straw man.

Today you can simply use flexbox on the container:

    
    
      display: flex;
      justify-content: center; // horizontal
      align-items: center; // vertical
    

Doesn't work in IE without a JS polyfill (which is available), but has worked
in all other browsers for six years or so.

~~~
account42
That is exactly the code the website will generate if you select no IE
support.

~~~
_bxg1
Yet it opens with this misleading blurb:

> Centering in CSS is a pain in the ass. There seems to be a gazillion ways to
> do it, depending on a variety of factors.

Which is no longer true in the great majority of cases.

~~~
breakingcups
That's only misleading if you don't have to support IE. I'm guessing that's
the case for you but many of us still have to.

Also, this site seems to have gone up in 2015 and hasn't changed
(substantially) since.

I also don't think you're correct in calling this a straw man. This is not a
debate and there was no other party whose assertion this site seems to refute,
so calling it a straw man doesn't seem to fit.

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

~~~
MattGaiser
Google’s home page uses it three times.

~~~
perilunar
HN wraps the whole page in a centre tag.

------
jacobedawson
Having to still support IE 11 for most projects, I really like the following:

div { position: absolute; right: 50%; bottom: 50% transform: translate(50%,
50%); }

~~~
onion2k
IE11 supports most of flexbox. You don't need hacks.

~~~
jacobedawson
forgot the <

------
ChrisMarshallNY
Here's what I've been doing for years (The <div> can be any element, like
<ul>):

<div id="wrapper" style="text-align:center"> <div id="wrapped"
style="display:table;margin-left:auto;margin-right:auto;text-
align:left"></div> </div>

WFM YMMV

~~~
RyanGoosling
You don't need the style="text-align:center" on your wrapper element

~~~
ChrisMarshallNY
> You don't need the style="text-align:center" on your wrapper element

Why not? The goal is to center something with an unpredictable size.

display:block adapts to the container. display:table adapts to the contents.

This uses both.

~~~
RyanGoosling
A box isn't text. Why don't you give it a whirl.

~~~
ChrisMarshallNY
Oh, I see. Gotcha. I use it for images and lists, so I've gotten used to it.

Cool. Thanks!

------
diablo1

        <div class=element></div>
        
        <style>
        .element{
        position:absolute;
        width:500px;
        height:500px;
        left:50%;
        top:50%;
        margin-top:-250px;
        margin-left:-250px;
        }
        </style>

~~~
viklove
Don't do this, you will run into edgecases that make things look jank. Use
flexbox: [https://css-tricks.com/snippets/css/a-guide-to-
flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

~~~
diablo1
Thanks for the tip. Any particular browser that causes such 'jank'?

~~~
Chyzwar
This would center a fixed sized element in absolute position to page, this was
never an issue. Problems start when you do not know size of your element and
its parent. Flex finally fixes[1] this issue but it was not fully supported
until recently[2].

[1] [https://philipwalton.github.io/solved-by-
flexbox/demos/verti...](https://philipwalton.github.io/solved-by-
flexbox/demos/vertical-centering/) [2]
[https://github.com/philipwalton/flexbugs](https://github.com/philipwalton/flexbugs)

Most of the flexbugs are now fixed and flex should be recommended way of
making layouts.

------
carapace
I was explaining this to a normal person the other day, and maybe I'm doing it
wrong, but it was impossible not to make it sound like we are weanies. I mean
complete knee-biting berks.

"What do you mean _centering_ was _hard?_ "

"Not was, still is."

"..."

"yeah. ..."

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

~~~
enumjorge
Earlier HTML had tags that styled elements. The community decided it would be
better if styling was left to CSS and HTML simply described document
structure. This way styling lives in one kind of file instead of two different
places.

I wouldn’t recommend using it for big or professional projects, but I guess
it’s fine for personal stuff. Like the other comment said it’s an obsolete
tag. Browsers tend try hard not to break old HTML but not sure that’s
guaranteed to always be the case.

~~~
colejohnson66
Didn’t HTML5 remove the <center> tag? In that case, just seeing the HTML5
DOCTYPE should allow ignoring those elements (as in not styling them). For
example, if I do:

    
    
        <center>
            Text
        </center>
    

...just treat the tags as <doc> tags:

    
    
        <div>
            Text
        </div>
    

I understand there are _many_ websites following older standards, but I can
wish (for HTML5 to have been “strict”)

------
otabdeveloper4
Silly human! One does not simply center in CSS.

------
mouzogu
One which I came across recently, a little smaller than the usual flex
solution:

.v-h-center { display: grid; place-content: center; }

------
johnchristopher
I am not into the CSS game anymore, if anything needs to be done I'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) ?

~~~
mrweasel
I just throw a <center> in, it works well enough for most cases.

~~~
laurentdc
I prefer <center style="text-align: center;"> for maximum centeredness

~~~
6510
<center class="center1 ct cen algn" id="center42" style="text-align: center;
margin-left: auto; margin-right: auto;">

