One of questions in short test that we give to interviewed frontend devs is:

"How would you center a <div> horizontally with CSS?"

So many still answer with <center> ...

thats odd :D
i usually use margin:auto
or i add text-align:center to the div s parent

how can they answer the question fundamentally wrong each time? even if they answered "letter-spacing" at least the answer would have been CSS

The guys at work will be so disappointed when I tell them this news...

@aram I prefer margin:0 auto; for all centering haha

With fixed width or variable width?

Div has to be display: block which it is by default and margin-left and margin-right set to auto. IMG are display inline by default, for example, and would need to be set to display: block to be centered like this. And text-center the parent might help too.

@uziiuzair only down side to margin: 0 auto; is you lose top and bottom margins. margin-left:auto;margin-right:auto; will keep the margins on the bottom. Lots of times the top/bottom margins aren't needed though.

@wolfish, have any of them ever thought to ask about the div's parent? Not sure how anyone can give a proper answer without knowing what element the div is being centred in.. :/

For the record, I'd probably use flexbox with magic margins to centre it on both the X and Y axis.

And yes, I know "magic margins" isn't really a thing, but if you Google it you'll find the relevant CSS-Tricks page that shows what I mean.

@arcadesdude or margin: 15px auto; gives you 15px on the top and bottom.

and... how do you do that vertically? 😆

@ZaLiTHkA Yes it was provided with full short html and css, visual example of how it display, and event got /* ... */ suggestive comment where person should start, but still some people ignored that and put the div in <center> tag as solution ;p

it was only to check if the candidate know some basic css

its not used anymore in our interviews but I got old copy of it, the question looked like this (texts are in polish) https://imgur.com/MEk7KgX

Flexbox is the future I wish to live in.

@-bgm- Flexbox for president!