How to center a div in CSS

https://www.joshwcomeau.com/css/center-a-div/

by joshwcomeau • 2 years ago

445 250 2 years ago

joshwcomeau.com

ok1234563• 2 years ago

Was the <center></center> tag really that bad after all?

sonofhans• 2 years ago

<center> is a text-level element, not block layout control.

ok1234563• 2 years ago

If you allowed it to control blocks, you could consider it a semantic tag with reasonable defaults.

system23• 2 years ago

You can't modify this without touching html. Just create a div and assign class so you only modify CSS later.

ok1234563• 2 years ago

What would stop it from being styled by CSS in the same way? You could use it for semantic markup.

dylan6048• 2 years ago

so how do you center that vertically?

I consider it only slightly less offensive than <blink> as being useless. I also find it incorrect from attempting to have the markup dictating the layout. Sure, this was before CSS was robust, but it is one of the reasons that I just had no problem with it going the way of the dodo.

assimpleaspossi8• 2 years ago

The <blink> element has never been part of any HTML standard.

bradley13• 2 years ago

The "how to center" is a classic question for CSS. The fact that it is not blindingly obvious is indicative. CSS is a miasma. A kitchen sink collection of stuff designed, not by one committee, but by several committees simultaneously.

They have long since given up on actual releases. Instead, the current state of CSS is a collection of states of individual modules, all of which are under continual change.

This is not how you develop software. Or anything, really.

/rant

wvh• 2 years ago

I both agree and disagree. This is just how how larger groups of humans work, slowly and chaotically. Herding cats. It's also not clear where we're collectively going with the web and all of its technologies, so there will be lots of failed experiments and disagreements. There's a much broader scope here than a well planned engineering project with a clear goal and path.

dpedu2• 2 years ago

Regarding centering - eh. I think this question comes up so often because it is simply the natural question to ask.

What are the first things someone learning how to make a web page visually look how they want is going to learn? Probably text size, color, background color, and alignment. All of these except alignment translate pretty much 1:1 from pre-css days. Color on the body tag, size/color on the tag surrounding the text you want styled. Or, css color/font-size property on the surrounding tag, or background-color on the body. All very similar.

Prior to CSS, if you wanted content centered, you just slapped it in a <center> tag. Didn't matter if it was text or html objects like divs, tables, buttons, etc. IMO too many people expected CSS to work like what we had in the past - no distinction between inline and block objects - and when CSS didn't fit their pre-conceived mental model, these questions came up. And centering just happens to fit in the niche of being basic enough that beginners want to know about it.

wruza10• 2 years ago

According to this, most CSS issues boil down to “you don’t know CSS and have a wrong mental model”. Well, if most people who enter it have a wrong mental model, it’s not their fault that the “correct” model is absolutely alchemic in its nature.

max-throat• 2 years ago

The fact that centering a div in CSS basically requires a doctorate is the entire reason I gave up on web dev.

notfed• 2 years ago

I empathize! It used to, but no longer, so give it another shot! :)

dbbk• 2 years ago

If you think flex centering is the equivalent of "requires a doctorate" I'm not surprised you weren't cut out for web dev

hirvi74• 2 years ago

Such venom.

I am sure the GP was just trying to be comedic.

dylan6048• 2 years ago

So for those of us that consider this dead simple, can we just start adding CSS Ph.D on our CVs?

Alifatisk3• 2 years ago

Damn, that’s a harsh response

tshaddox• 2 years ago

It requires single-digit minutes of work. I don't have a doctorate but I gather that it is rather more difficult.

shp0ngle• 2 years ago

It's about as hard as in any frontend framework, native or non native.

Someone12342• 2 years ago

Did you read the article? Specifically the Flexbox example.

icedchai2• 2 years ago

The problem is it was easy to center things with tables. Then once CSS was popular, that was the "wrong way" to handle layout. I find CSS the worst part of web development, and it's what turned me off of front-end work. Glad flexbox has finally made things simpler again.

autoexec• 2 years ago

I like CSS but I'd agree that tables got a bad rap. They were very easy, very effective, and only occasionally turned into a nightmare of nesting that was impossible to maintain

My problem with CSS now is that it's gotten too bloated to the point where it's introducing privacy and security risks. I really want an add-on that restricts CSS by default to only a sane subset of features.

assimpleaspossi8• 2 years ago

Google for "The Web is Ruined and I Ruined It" written by the guy who first came up with the idea to use tables for layout.

nicoburns2• 2 years ago

The simple version is buried halfway down the article, but:

    .container {
       display: grid;
       place-content: center;
    }

isn't so bad.

mediumsmart2• 2 years ago

The container is body, does not need a class in the simple version.

entropie• 2 years ago

Every. Time. Man.

I love his posts. So much information and insight. But why the hell does a guy obviously so good at UX stuff fuck around with my scrolling? I cannot stand it.

charliebwrites• 2 years ago

Can somebody explain to me why centering a div is such a challenge to have an easy implementation for?

It seems like Browser makers, Languages creators, and developers all have a pretty strong incentive to solve such a fundamental, basic problem in web development to make the design experience easier.

Why haven’t these groups come together to make an easy solution to this? What am I missing?

JimDabell5• 2 years ago

Because what people mean by “centring” varies depending on context. You are actually talking about a group of several different behaviours and you don’t always want the same one. So you need multiple behaviours, and you need multiple ways of specifying those behaviours.

The most obvious example: horizontal and vertical centring are different because our writing system has a specific direction it flows in. You can’t just do the same thing for horizontal as for vertical because text doesn’t work that way.

hnlmorg4• 2 years ago

This problem was solved literally decades ago with <center>. I appreciate why that HTML tag was deprecated but I also completely sympathise with why people scoff at the complexity of doing the same thing with CSS.

_aavaa_2• 2 years ago

I personally believe it was incompetence. CSS was not the first or only markup language in existence and yet here we are years later...

dylan6048• 2 years ago

I was not aware that CSS was a markup language

mhink• 2 years ago

They *have* come together. That's why we actually have several options built for purpose and native to CSS these days, as opposed to relying on hacks and Javascript (which was surprisingly common even as recently as 5-6 years ago. The name of this article is more or less a joke, because most people with any experience will recognize that since Flexbox and Grid have become widely available, the answer is generally "use Flexbox or Grid". Knowing the nuances of these layout algorithms is table stakes for building UIs that don't feel "janky".

The problem with designing and implementing application layouts for the Web is that it's such a dynamic medium. You can't ever rely on a particular viewport size, and you generally can't rely on content size either.

Like, just as a simple example: build me a page which has a white background and three blue boxes in the middle which contain white text saying "foo", "bar", and "Supercalifragilisticexpialidocious".

How big should these boxes be? Should they even be the same size? How should text wrap within them? How should the text itself be aligned within the boxes? When you say the "middle", do you mean centered vertically or horizontally? Are they laid out in a row or in a column? What's the expected behavior when the viewport size is too small to accommodate them? Should the boxes themselves wrap in some special way? Should they resize themselves?

This isn't even really splitting hairs or anything, it's just sort of the mindset you get into when you start working within a domain that's governed by *constraints* rather than specific sizes.

shiomiru3• 2 years ago

It's all the more ridiculous because browsers can in fact center divs (block boxes), in an incredibly straightforward way, using the <center> tag. And all browsers implement this using a vendor-specific CSS rule (e.g. text-align: -moz-center). They must be able to do this, because real websites use it, and there is no other way to implement it using CSS.

And yet it's not standardized[1], so if you implement it in a new layout engine you're left with reverse-engineering what other browsers do (a classic).

[1]: OK, I lied. It is standardized... in the HTML standard. https://html.spec.whatwg.org/multipage/rendering.html#align-...

Notice how it's not a stylesheet, not a presentational hint, just prose. It's because standard CSS can't do what browsers could since before its invention.

assimpleaspossi8• 2 years ago

The `<center>` element has been obsolete for 20 years and more.

https://html.spec.whatwg.org/dev/obsolete.html#non-conformin...

alx__• 2 years ago

Why haven’t these groups come together to make an easy solution to this?

https://xkcd.com/927/

lofaszvanitt• 2 years ago

This guy's page never pops up in google search... My only problem is, that sidekick on the page is quite irritating. Can't we have some kind of furry fantasy creature instead?

xnx• 2 years ago

It's taken decades for CSS to come up with anything as workable as putting content in a centered table. Yet during that same period, use of tables was shamed for layout.

Alifatisk3• 2 years ago

I found using tables to be the most robust way at the time

rad_gruchalski• 2 years ago

Nostalgia. I remember those days, 2000+ lines long tables written by hand in notepad on Windows 98 and served with PWS. Those were the days.

cpach• 2 years ago

Try ‘View Source’ on HN :)

mistersquid• 2 years ago

Yet during that same period, use of tables was shamed for layout.

Tables for non-table data are not semantic and break accessibility.

There is more to web development than where content lands on a page, which is only part of why good web development is hard.

chiefalchemist• 2 years ago

And good web development is harder because still too often web design is done by designers who don't have enough understanding of web development.

My gawd, just earlier today I saw a help wanted that said "...PSD to pixel perfect..." I would have laughed if I wasn't already crying. "This is my life" and then the tears kicked in.

recursive2• 2 years ago

Tailwind is not semantic, but no one seems to mind that for some reason.

westurner2• 2 years ago

HTML Tables don't wrap on mobile displays. If you build your site with tables for layout, it will probably have horizontal scrollbar(s) and you'll need to rewrite it for mobile; so a CSS framework is usually a safer choice for less layout rework, unless it's a data table.

HTML Tables need at least `<th scope="row|column">` to be accessible: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/A...

"CSS grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la... lists a few interactive resources for learning flexgrid:

- Firefox DevTools > INTRODUCTION TO CSS GRID LAYOUT: https://mozilladevelopers.github.io/playground/css-grid/

- CSS Grid Garden: https://cssgridgarden.com/

MDN > "Relationship of grid layout to other layout methods": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

MDN: "Box alignment in grid layout": https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_la...

iamacyborg2• 2 years ago

Tables absolutely can wrap on smaller displays, that’s how we used to code responsive emails.

quesera• 2 years ago

HTML Tables don't wrap on mobile displays

Sure they do. HN is, famously, rendered as tables.

rsch• 2 years ago

Haha yes I remember that.

Pros and cons of using DIVs and CSS:

+ hipster cred

- DIV soup

- CSS back then was wildly, W I L D L Y unsuitable for what people where trying to do (I think it boils down to it being designed to format documents, not web apps or on-screen layouts)

Pros of using TABLE:

+ Actually works

labster• 2 years ago

I never had to spend time in the old days debugging centering, I just used <center> and tables and it worked! Then I could spend the time saved by adding <font> tags everywhere and making images for my rounded corners.

tambourine_man• 2 years ago

The article is great.

His avatar popping up mid scroll did “startle” me, though. A bit creepy sneaking in slowly from the edge. But it's effective, for sure.

latexr• 2 years ago

As far as “subscribe to the newsletter” prompts go, that wasn’t as annoying as what I usually see. Still, would prefer it to have been on the right side so it didn’t obscure content.

b450• 2 years ago

Wow, all these "why is this still so hard" complaints feel so off-base to me! As the article says, Flexbox straightforwardly solves centering in every simple case. When it doesn't solve it for you, you're doing something more complex than _just_ centering, so it's inappropriate to expect that the implementation will be dead simple.

vogtb• 2 years ago

This is super true. Whenever I find myself struggling w/ flexbox it helps to take a step back and solve it one step at a time. Working my way out-to-in, parent-to-child element, and it becomes so much easier. There's a skill to it, but it's basically just elastic algebra.

karaterobot• 2 years ago

Yep, there was a time when it was moderately difficult in certain cases, but it's been a solved problem for the last decade or so. You still hear people acting like centering DIVs in CSS is something like a cross between alchemy and rocket science, which is perhaps indicative that people don't follow CSS with the same attention as other parts of web development—yet they still feel comfortable making these statements!

agumonkey• 2 years ago

grid and flex were very nice semi malleable additions, they really lift the legwork and in the 10% of complex cases you can spend your brain time with joy

Someone12342• 2 years ago

Flexbox is what I always wanted CSS to be, but for a long time wasn't, until one day it was, and we could drop support for browsers without it. Feels almost end-game for CSS.

There was a reason people loved Bootstrap's grid system so much, Flexbox does all that and more straight in your browser. Cannot over-express how much I love it.

thr334• 2 years ago

I too love flex but your comment is a bit off. bootstraps grid system is a fake grid modelled on flex. building layout grids with flex in general is definitely not endgame, its actually very tedious and unreliable.

css grid however is perfect for this and represents one of the most underutilised powerhouses in the css kit

shadowgovt2• 2 years ago

Having to use flexbox already feels like we're shooting a fly with an elephant gun, is the thing.

Everyone expects it to be as simple as <div centered> and everyone is surprised it isn't. That's a pretty universal experience in web development.

internetter• 2 years ago

Do you want your div centered vertically? horizontally? both? Relative to what? the window? the container? These are just some of the common questions that are asked every time you need to centre something. A simple attribute cannot work.

hombre_fatal2• 2 years ago

`<div centered>` is the same thing as `<div read-my-mind>` since there are so many variations of what you might want. And once you generalize the solution around those variations, you have something like flexbox.

For example, what does `<div centered>` do when there are two children? And what do you do when you want the opposite behavior?

parasti• 2 years ago

And on top of that, flexbox has been widely supported for over a decade! The comments here are a wild ride.

crazygringo2• 2 years ago

It's because for those of us who have been around a while, it was hard before flexbox, then it continued to be hard when flexbox didn't have 100% support and we kept having to track browser usage and deciding whether we could use flexbox or not, and now there are just so many ways to do it that it's an overwhelming amount of complexity. You're often not building something from scratch but rather updating old code, and having to figure out why the CSS was done in one particular way for what reason, and what might break in which edge cases, and whether you should/can update it or not, and which one of several solutions when it's not simple.

If you look through the article, none of it is intuitive. Even with flexbox, the horizontal setting is called "justify-content" while the vertical is "align-items". I personally simply can't remember what a lot of CSS properties are called anymore -- there are so many now, and the names are so arbitrary. (Even hyphens are maddening -- why is it "white-space: nowrap" instead of "whitespace: no-wrap"?)

At the end of the day, there's a big difference between:

1) Simple, intuitive, reliable building blocks that let you build complex solutions out of simple parts

2) Convoluted, partially-overlapping, constantly-needing-to-Google building blocks that let you build complex solutions out of complex sets of parts

A language like Go or Python is #1. A language like CSS is #2.

thr334• 2 years ago

justify/align and content/items have specific meanings and the 'intuitive' naming most people expect - horizontal, vertical - completely betrays the powerful elegance of the flex model.

justify always refers to the main axis of a box model element, and align refers to the cross axis. by default, flex-direction is set to row, so justify often means horizontal and align often means vertical.

until it doesn't of course. when we switch tbe flex direction from row to column which is a very handy trick for easy responsive on small devices, the main axis is now vertical and the cross axis is now horizontal.

int_19h• 2 years ago

For comparison, here's WPF that shipped in 2006:

   <Button HorizontalAlignment="Center" VerticalAlignment="Center"/>

(and you can write styles that apply these to groups of elements based on criteria etc)

agos• 2 years ago

I don't know, I constantly need to google how to work with package management in Python

ComputerGuru• 2 years ago

I haven’t found a way to center a div with a background color containing text such that when the text wraps the overflow space (tried to expand horizontally to this size but ultimately needed to wrap) ends up being reclaimed (not background colored). Without forcing text to wrap at a certain width if it might still fit on one line.

ghoomketu• 2 years ago

Really nice tutorial. On a related note, can somebody tell me how to make a nested div overflow (scrollbar) without specifying the height of all the parents divs?

    <div style="height: 100vh" id="one">
        <div id="two">
            <div id="three" style="overflow: auto">
                I need
            </div>
        </div>
    </div>

This is a rather simple example, but sometimes the divs are nested really deep inside and unless I specify all the childs divs as 100% height there is no scrollbar. This causes me a lot of issues.

FooBarWidget• 2 years ago

I solved this a while ago. If memory serves me correctly, you need to set overflow none on div two. Of this doesn't work, let me know and I can check my codebase next time it's convenient.

allannienhuis2• 2 years ago

I'm too lazy/busy to confirm/test this, but providing a new stacking context on the parent by either by adding a position: relative (or whatever) or adding transform: translateZ(0) (or X or Y) avoids the need to specify every parent's height. Someone less lazy than me could confirm :)

cfj• 2 years ago

I'm just as lazy as you, but I just wanted to point out that you can create a new stacking context explicitly with

isolation: isolate;

pkoiralap• 2 years ago

I love this article. Especially the interactive aspect of it. Big Kudos.

Also something I have been using since forever that almost always does the trick for me: http://howtocenterincss.com

lxe• 2 years ago

Always learning something new from Josh W Comeau

juliusdavies• 2 years ago

desertlounger• 2 years ago

Classic!

divbzero2• 2 years ago

I prefer the simpler:

  <center>Here you go!</center>

UberFly• 2 years ago

Can't count how many times I've searched centering in divs over the years.

ChuckMcM3• 2 years ago

Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layout and formatting is. There are literally PhD thesis topics on it[1]. And to expect that complexity to be abstracted away into some sort of simple "do-what-I-mean" expression? That just isn't going to happen.

Go look at Gwern Branwen's web site[2]. That is art. But the trick is decide how you want the site to look and then constraining your written material to be expressible in that style.

I've been looking at web page layout since 1995 when I joined a startup that was doing the "first magazine on the web about Golf!"[3] When the Zen Garden folks did their web site and started the 'A List Apart' mailing list which is now a website[4] it really helped me understand just what one was up against if you wanted to produce web content that rendered nicely on a wide variety of projections. And yes, the term projection is intentional because the function of going from semantic content to presentation on a screen or paper or other flat surface of finite size, is a mapping (or projection) from a native space into the rule set of the destination space. That rule set consists of both physical constraints (pixels per inch, total pixels horizonally and vertically, color capability) and software constraints (how much of the underlying capability can the browser software that is currently running express). Not to mention that every browser wants to do their own special thing.

So yes, CSS is a "hot mess" for people who decide one day "I'm going to build a web page from scratch." And yet, that mess is really just an abundance of choices rather than constraints on what you can do. The process is the same for everyone, find the tools that help you achieve the results you want and then package your material into a form that you can easily convert that into that look.

[1] https://scholar.google.com/scholar?hl=en&as_sdt=0%2C5&q=thes...

[2] https://gwern.net/

[3] It was called Golfweb and eventually ended up being part of CBS Sports apparently (golfweb.com sends you there)

[4] https://www.alistapart.com

robmccoll• 2 years ago

I recently spent a few days hacking flow-based layouts and pages into a flex-box-based layout system, and I can confirm that layout and formatting is hard. Figuring out how and when to shift elements to the next page, especially when you have a table with columns containing text and objects of different sizes, is a challenging exercise in picking good heuristics.

taeric14• 2 years ago

The problem with css is almost entirely self inflicted, though. Yes, layout is hard. Why make it harder by aiming for the model we now have? Specifically, why aim for one major model that will fit all pages? Usually done with another sysipheon aim of automatic layout recalculated every page.

Combine this with the amusing goal of targeting any and every size of window. Why would anyone think that is doable?

danShumway15• 2 years ago

Why don't we have completely separate styling systems for mobile devices, widescreen devices, vertical monitors, tablets, and billboard displays? Because that would be a bigger nightmare to deal with than CSS.

I like that when I visit a web page on my mobile phone, it loads regardless of whether or not the site owners hired someone to build a completely separate interface. And I like that when I design interfaces for phones and for large screens, I don't need to learn 2 languages to do it. And I like that when I stack two browser windows next to each other on a 1920x1080 monitor they resize and I can read both of them.

When people say that they don't want to worry about multiple screen sizes in their layout, they mean that they want an interface that works on one screen size and ignores everything else. And that would be a huge loss for accessibility and innovation if the web pushed developers in that direction. The reason it would be simpler for people to work with a more targeted language is because they wouldn't build the other interfaces at all. They'd learn one language, target one device that their most predominant customers used, and then we'd have a mobile Internet and a desktop Internet and they'd be separate things with no expectations that sites would work on both devices.

----

And I think this sort of gets to the complaints about complexity in general, because the complexity of this UI design is reflecting a reality that good interfaces are adaptable and people have multi-faceted needs from their software. Even on desktop, people use different screen resolutions, they scale fonts, they mess with layout. And there's this subtle idea behind complaints about complexity that when you dig into it is not actually "why do I have to target so many devices" but is really "why do people use so many devices? Why isn't the world more uniform, why on earth are people changing their screen resolutions, what's wrong with them? Why can't they just decide on a device and stick with it?"

But good UX design is about designing for the real world, not for a hypothetical standardized human, and in the same way that cars need adjustable seats and can't just say "well on average everyone is this height and width", good UX acknowledges and responds to the idea that software and content are delivered in multiple contexts.

Of course that's a balancing act, it does make interface design more complicated, and it's not something we can do perfectly. But it is a balancing act, it's not a problem we can solve by saying "heck it, everyone needs to stop buying HDPI laptops." I mean, we're not all Linux developers, we can't all just pretend that touchscreens don't exist ;)

The same exact complaints show up with the extensible web and with progressive fallbacks in general. It is real annoying to build software that degrades nicely depending on what hardware support someone has and what features they've turned on and off in their browser. But it's also a better way to build software that better reflects how software is used in the real world by real people.

thr334• 2 years ago

it is not only doable (trivially so for most static sites) but also the only appropriate model for delivering websites/software.

troupo4• 2 years ago

The world invents resizable windows in the 1980s (or perhaps 1970s).

People in the web bubble: oh it's impossible to do layout for different sizes.

chrisweekly2• 2 years ago

Hi Chuck, Great points. FWIW, your tenure with web layout has me beat by about 3 years (1998). In all my relevant experience, the materials at "Every Layout"[1] remain unparallelled. Highly recommended.

[1] https://every-layout.dev/rudiments/boxes/

ChuckMcM3• 2 years ago

I don't know I spent a year using "Hotdog" and another three using "FrontPage" so those really don't count as years spent "getting better" :-)

ijhuygft776• 2 years ago

Nice article, the comments here are kind of amazing for a nominally technical audience. It is almost as if people have no idea how difficult automatic page layout and formatting is.

It's nuts that this is true after so many years of HTML and CSS.... software sucks any way you look at it.

Why we still can't get a bug-free OS is beyond me.

marzetti• 2 years ago

Noting your comment, I couldn't resist linking to some more CSS art:

https://css-art.com/the-girl-with-a-p-e-a-r-l-css-earring/

Not sure how many centred divs are in it though...

ChuckMcM3• 2 years ago

Thanks for that link, that is a pretty amazing demo site!

ChrisMarshallNY• 2 years ago

I always found Stuart Nicholl’s CSSPlay site fun. It’s been through a lot of changes, over the years: http://www.cssplay.co.uk/

Some of the demos are jaw-dropping, if not always practical.

wruza10• 2 years ago

How to make sure it’s not self-imposed problem and not in-there research? In my experience, I never thought “layout hard” before joining web dev. And yes, we had scrollable resizeable windows back then. I hear that the status quo is the best way from everywhere. But then I remember my custom appkit, gtk controls and even my own (unreleased) lua-based toolkit, where centering content or wrapping and aligning elements wasn’t an effing deal, and wonder what am I missing.

And yet, that mess is really just an abundance of choices rather than constraints on what you can do

Also known as TMTOWTDI, long forgotten and buried for good.

troupo4• 2 years ago

What you wrote at the beginning is: "It is almost as if people have no idea how difficult automatic page layout and formatting is."

However, the rest of your text is: "look how difficult it is on the web, and look at all these amazing things people do despite this being so difficult on the web".

All the complexity on the web is 100% self-inflicted. It started as a simple system to display a couple of paragraphs of text accompanied by a couple of images in one rendering pass. That's it. And then it grew haphazardly, with no roadmap or plan, through a series of hacks bolted on top to give it more capabilities.

We could do the "near-impossible PhD-level stuff" in 1970s [1]. The Mother of All Demos from 1968 arguably had more capabilities than the web even today: https://www.youtube.com/watch?v=yJDv-zdhzMY

For some reason you took "it's difficult to do on the web" as an inviolable axiom of "it's difficult to do, period". The entirety of "impossible layout on the web" is about as complex as what WordStar could handle in mid-1990s

[1] This screenshot is from 1981: http://www.catb.org/~esr/writings/taouu/html/graphics/starsc... (from http://www.catb.org/~esr/writings/taouu/html/ch02s05.html)

borbtactics• 2 years ago

The demo containers and their animation are so cool and useful.

mstudio• 2 years ago

Great article. Love the interactivity. One thing that really helped me understand CSS positioning (and centering) years ago was reading about the box model. Understanding the box model helps you determine flow within the DOM. The `display` and `position` CSS properties are also fundamental to learning about positioning. MDN has great articles on these!

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layou...

system23• 2 years ago

I was about to yell "Another basic CSS guide" but I was proven wrong. Every annoying centering issue is addressed in detail. Very well written.

alex_suzuki• 2 years ago

Thanks for the amazing article, Josh! I‘ve come to use your CSS reset on a regular basis: https://www.joshwcomeau.com/css/custom-css-reset/

ramoz3• 2 years ago

for the uninitiated:

    <div>I'm centered</div>

</div>

SarahC_• 2 years ago

That doesn't work on Codepen.io, in the latest Chrome.

Back to the drawing board.

ramoz3• 2 years ago

    <div>I'm centered</div>

</div>

* I wrote the original without testing but it is justify-content, not justify-items... oops

retrochameleon2• 2 years ago

Frankly, I would probably just use flexbox for any centering use case. It's simple, fast, and straightforward. As far as I understand, flexbox has a pretty well optimized implementation, so it's not really a performance concern to just throw in another flexbox. Why would you not use it?

jfengel• 2 years ago

I often don't understand what flexbox is doing when what's inside is itself complicated. I think that fits-content might help, because I haven't tried that.

retrochameleon2• 2 years ago

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I honestly don't understand why people would find Flexbox hard to understand. Yes, there's a little bit of new terminology, and there's a reason for that. There is a main axis whose orientation can be changed, which affects the interpretation of other properties you use, but most of the time, you won't change it.

justinzollars• 2 years ago

Nice intro. I always feel like I'm fighting css.

t1c• 2 years ago

I've been doing webdev for a while and this is by far the best "centering a div" article I've ever seen.

nailer• 2 years ago

TLDR:

place-items: center;

primer42• 2 years ago

Tldr - it's impossible

divbzero2• 2 years ago

I like the brutally honest cookie notice in one of the examples:

We value your privacy data.

We use cookies to enhance your browser experience by selling this data to advertisers. This is extremely valuable.

4death43• 2 years ago

Maybe I missed it, but position: absolute, left: 50%, transform: translateX(-50%) is usually my go to.

infensus2• 2 years ago

Centering like this can make your element blurry on non-hidpi screens, because transforms are not snapped to the pixel grid like layout properties, and 50% can sometimes land on a subpixel

4death43• 2 years ago

Is this still relevant? I thought browsers had proper support for sub-pixels now.

wruza10• 2 years ago

What do you do when position isn’t absolute?

4death43• 2 years ago

Then I use one of the approaches listed. However, I find that usually I want absolute positioning when centering either horizontally or vertically.

hlammers• 2 years ago

I was kinda surprised that this method wasn't included in the article. While I use flexbox for centering most of the time, I still find myself resorting to the absolute positioning way sometimes.

d_burfoot• 2 years ago

Like many others in this thread, I think CSS is an absolute catastrophe. For me, the key issue is that style directives are constantly either 1) clobbering each other or 2) silently failing to have any effect.

sodapopcan6• 2 years ago

There are a bunch of comments commenting on other comments so I'm going to join in.

These comments are largely talking about how centring is hard from an implementation standpoint and can mean different things. Sure, but the whole "CSS centre meme" is just "How do I put one element dead centre within another". I can't point to data to back this up, but I'm pretty sure that's what 99% of people mean when they ask "Why is centring so hard?"

For those of us who grew up with GeoCities and AngelFire etc, the reason not being able to easily do this felt so ridiculous and why it was hard to buy that it's hard to implement is that we were able to do this no problem with HTML, and still can!

    <table>
      <tr>
        <td width="600" height="600" bgcolor="yellow" align="center" valign="middle">hello</td>
      </tr>
    </table>

That puts the text "hello" squarely in the middle of a 600x600 yellow box [0]. This worked in the 90s. I know nothing about the implementation of CSS, but surely you can understand the annoyance of been handed a new tool, told it's better, yet wasn't able to do such a standard thing lots of people were already doing. It's a big reason I didn't listen to the dogma and kept up with table layouts into the late 2000s.

PS, maybe it's Stockholm Syndrome, but I love CSS FWIW.

[0] You actually don't even need the `valign` which surprised me, at least not in chromium... I'm not sure if that is a recent thing because I haven't actually written code like that in around 15 years.

koito17• 2 years ago

Works in Firefox, too, without the "valign" attribute. Though I would not rely on auto-layout behavior in general since I've always seen subtle differences across the three major browsers whenever using tables without a fixed layout.

filleduchaos4• 2 years ago

You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

But then again, in my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works. At least the article's author is self-aware about this.

rablackburn• 2 years ago

> You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

Notably not a `block` element like a div or p - which is what most people are going to use as a container.

anticodon• 2 years ago

In 2000-2010 not only I was a fullstack developer, but also had to write CSS and HTML code for the websites I worked on often.

I remember that as an extremely painful experience. I can't remember all the details, but I remember that until flexbox and grid were implemented, everything CSS related was a pain. I vaguely remember that until 2008-2009 (maybe I'm off by 1-2 years) something trivial as rounded corners also was a pain.

I also remember that about 80% of the CSS pain was caused by Microsoft Intenet Explorer 6.0. It was complete garbage when dealing with CSS and Javascript (I was working with huge JS codebases at the time). But nobody in the web world could ignore it because it had a huge market share. I hate that browser and Microsoft with passion till this day. So many hours, days, weeks wasted to make everything work in a browser that wasn't updated by MS (why spend money when everybody is using it - they even fired the team that worked on it) and had a very "specific" implementation of Web standards.

johnnyanmac• 2 years ago

n my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works.

I think the big issue in the 2000's was cross compatibility, and how seemingly simple elements on one web engine simply wouldn't work or look right in another. IE 6 was infamous for this. Tables were one of the few consistent elements, could be dynamically generated with ease, and simply feels easier to think about from a designer POV

I think that misalignment (no pun intended) is what lead to the huge snowball that is using frameworks upon frameworks to solve issues that some simple HTML/CSS should have solved. By the time the web engines evened out (and IE died) and CSS got better options, the damage was done. JS ruled the landscape.

quectophoton• 2 years ago

corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

I can't believe I didn't know about this until now.

Before flexbox and grid, I don't know how many times have I written `position: relative;` on parent, and `position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);` on the thing I wanted to put in the middle (vertically and horizontally).

eska4• 2 years ago

in my experience many of the people who wax poetic about just using tables and/or complain about how CSS is limiting and confusing...never actually put in much of an effort to learn how it works

As somebody who was actually there back then your opinion reads as arrogant and condescending. Do you really think the entire industry just did it wrong for decades? That people did not frantically search for an easy solution for this silly problem they faced constantly? You'd do well to learn to be more humble.

sodapopcan6• 2 years ago

You aren't wrong, but I don't think it was the case of not doing diligence. I welcomed CSS and started using it when it came out, though it was certainly painful back then (as siblings have pointed out) and I don't believe it would be a good faith argument to say otherwise. I was aware of `display: table-cell` but it always felt like a hack. I'm well of the irony in that statement, but if I'm going to call something a table cell, why not use a table? Regardless of how that sounds, that's how people think, especially 19 year old me! Furthermore, the name was far too technical. People who had little-to-no experience with table layout weren't going to search for "table" when wondering how to centre something.

In any event, the main reason I stuck with tables (and this of course was only in person projects) was because CSS didn't have a viable way to do layout until 2017. Semantics aside, I still view table layouts as superior to floats and clearfixes. I was terrible about thinking about accessibility back then, of course, so I'm not sure of the impact there.

JimDabell5• 2 years ago

You've been able to do exactly what you describe (i.e. putting "hello" squarely in the middle of a 600x600 yellow box) with CSS since its first incarnation, with e.g. the `valign` HTML attribute corresponding to the `vertical-align` CSS property on an `inline`, `inline-block` or `table-cell` box.

display: table-cell came along with CSS 2.0 (1998), and display: inline-block came along with CSS 2.1 (2011).

Unfortunately, there were huge amounts of CSS 2.0 that weren’t supported by Internet Explorer 6 (2001), and there was a five year gap until Internet Explorer 7 was released in 2006, which didn’t improve CSS support much (basically just support for a few selectors was added). It took until Internet Explorer 8 was released in 2009 before it supported the eleven-year-old CSS 2.0 properly. And after that point, web developers had to wait years before enough people had upgraded that it became possible to drop support for Internet Explorer 7 and below and start relying upon display: table-cell etc.

So even though CSS had display: table-cell in 1998, web developers couldn’t actually use it until after ~2011 or so. But still, that was 13 years ago now – time to stop beating the “Centring in CSS is difficult” drum.

wruza10• 2 years ago

Reasoning about the qualities of a system without having a competing party doesn’t do good in politics (dictatorship), in business (monopoly), in browsers (ie). But it’s different when it comes to layout (css).

mediumsmart2• 2 years ago

Great article but why would I need a div?

dingi• 2 years ago

How come the desktop UI frameworks have this issue solved for decades and CSS/Web still screwing around with mishmash of solutions? I guess, people were afraid to break stuff and kept piling garbage on top of garbage. I think it is safe to assume that the web layout systems suck.

mouzogu• 2 years ago

in css, things seem easy in isolation.

it's when you combine styles and inheritance that things get nasty.

then add on top:

viewports,

orientations,

layouts,

negative margins,

collapsing margins,

relative positionings

...which can make even "simple" centering into a 6-dimensional puzzle.

throwaway828• 2 years ago

You have passed Level 1.

Level 2: Put a form and form elements in it.

Level 3: Do it with flex.

eggdaft• 2 years ago

It’s interesting to note what we can learn from the use of tables for layout.

Tables have border, padding, and a cell-based layout arranged in columns. At a stretch they and their cells need white space around them, ie “margins”.

Tables are a long established element in layout.

And it turns out tables actually contain this wisdom, that all elements should work a bit like table cells: they should follow the box model (fairly obvious to anyone working in typography) but also that they should be arranged in columns (much less obvious and the foundation of grid layout and bootstrap).

It’s a natural evolution to come across some layout problems, solve them with tables (as any typesetting system is likely to support tables), and then realise that you need a new facility that has some of the properties of tables but not all of them.

CSS has discovered this. Oddly, some systems have not - for example, word processors have not unified elements under a box model etc.

masfoobar• 2 years ago

Very well done!

Clean and to the point - virtual coffee on me!

As someone who jumps on-and-off of webdev it can be a little frustrating catching up on latest javascript frameworks and, at lower level, modern Javascript and CSS.

cubefox• 2 years ago

For vertical centering, I never understood why you couldn't just give the container a fixed size and then, on the element, set margin-top and margin-bottom to auto. It works like this for horizontal centering.

My guess is that the specification treats vertical margins in a weird way. For example, margin-top:50% means 50% of the width, not of the height. I don't know why they decided to do it like that.

KTibow• 2 years ago

It's missing

  <div class="parent">
    <div class="child">hi</div>
  </div>

  .parent {
    display: flex;
  }
  .child {
    margin: auto;
  }

vietvu• 2 years ago

After over 10 years since I started using CSS, nothing changed. Center div still hard.

How to center a div in CSS

Related Stories