[HN Gopher] How to center a div in CSS
___________________________________________________________________
How to center a div in CSS
Author : joshwcomeau
Score : 222 points
Date : 2024-02-13 18:21 UTC (4 hours ago)
(HTM) web link (www.joshwcomeau.com)
(TXT) w3m dump (www.joshwcomeau.com)
| ok123456 wrote:
| Was the <center></center> tag really that bad after all?
| sonofhans wrote:
| <center> is a text-level element, not block layout control.
| ok123456 wrote:
| If you allowed it to control blocks, you could consider it a
| semantic tag with reasonable defaults.
| system2 wrote:
| You can't modify this without touching html. Just create a div
| and assign class so you only modify CSS later.
| ok123456 wrote:
| What would stop it from being styled by CSS in the same way?
| You could use it for semantic markup.
| system2 wrote:
| It would be messy. If <center> element is used somewhere
| else then you will have to find its parent classes. If they
| don't have proper parent div classes or <center> used in
| many places then you will have to individually target
| <center> elements like div > div > div > center and another
| one div > div > div > div > center.
|
| You can override center too but why would you try that
| instead of creating a class for a div and addressing it
| properly. Classless elements cause long-term issues when
| modified with CSS.
| dylan604 wrote:
| 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.
| assimpleaspossi wrote:
| The <blink> element has never been part of any HTML standard.
| dylan604 wrote:
| your point? whether it was or wasn't has no bearing on its
| uselessness
| bradley13 wrote:
| 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 wrote:
| 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.
| dpedu wrote:
| 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.
| max-throat wrote:
| The fact that centering a div in CSS basically requires a
| doctorate is the entire reason I gave up on web dev.
| notfed wrote:
| I empathize! It _used_ to, but no longer, so give it another
| shot! :)
| dbbk wrote:
| 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 wrote:
| Such venom.
|
| I am sure the GP was just trying to be comedic.
| dylan604 wrote:
| So for those of us that consider this dead simple, can we
| just start adding CSS Ph.D on our CVs?
| Alifatisk wrote:
| Damn, that's a harsh response
| assimpleaspossi wrote:
| And well deserved.
| tshaddox wrote:
| It requires single-digit minutes of work. I don't have a
| doctorate but I gather that it is rather more difficult.
| shp0ngle wrote:
| It's about as hard as in any frontend framework, native or non
| native.
| Someone1234 wrote:
| Did you read the article? Specifically the Flexbox example.
| icedchai wrote:
| 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 wrote:
| 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.
| yreg wrote:
| Using tables for layouts is an accessibility nightmare.
| assimpleaspossi wrote:
| 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.
| icedchai wrote:
| There weren't really many other options in the 90's.
| assimpleaspossi wrote:
| Not the point. The point was that some people still think
| there is nothing wrong with using tables for layout. The
| guy who started it all would like to have a word with
| them.
| nicoburns wrote:
| The simple version is buried halfway down the article, but:
| .container { display: grid; place-
| content: center; }
|
| isn't so bad.
| entropie wrote:
| 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 wrote:
| 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?
| JimDabell wrote:
| 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.
| hnlmorg wrote:
| 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.
| nicoburns wrote:
| <center> only centers horizontally which has been easy with
| CSS for years. It only gets tricky when you also want
| vertical centering.
| _aavaa_ wrote:
| I personally believe it was incompetence. CSS was not the first
| or only markup language in existence and yet here we are years
| later...
| dylan604 wrote:
| I was not aware that CSS was a markup language
| _aavaa_ wrote:
| How would you classify the language that most web pages use
| for specifying where to put the text and images (e.g.
| attempt to center it)?
| dylan604 wrote:
| A rules based language.
|
| https://developer.mozilla.org/en-
| US/docs/Learn/CSS/First_ste...
| mhink wrote:
| 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_.
| shiomiru wrote:
| 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.
| assimpleaspossi wrote:
| The `<center>` element has been obsolete for 20 years and
| more.
|
| https://html.spec.whatwg.org/dev/obsolete.html#non-
| conformin...
| alx__ wrote:
| > Why haven't these groups come together to make an easy
| solution to this?
|
| https://xkcd.com/927/
| lofaszvanitt wrote:
| 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 wrote:
| 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.
| Alifatisk wrote:
| I found using tables to be the most robust way at the time
| rad_gruchalski wrote:
| 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 wrote:
| Try 'View Source' on HN :)
| mistersquid wrote:
| > 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 wrote:
| 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.
| westurner wrote:
| 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...
| iamacyborg wrote:
| Tables absolutely can wrap on smaller displays, that's how we
| used to code responsive emails.
| rsch wrote:
| 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
| tambourine_man wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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
| Someone1234 wrote:
| 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.
| thr33 wrote:
| 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
| n_plus_1_acc wrote:
| I remember when bootstraps cols were implemented using
| float.
| shadowgovt wrote:
| 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 wrote:
| 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.
| mixmastamyk wrote:
| It worked that way with tables, attributes align and
| valign:
|
| https://www.geeksforgeeks.org/html-td-tag/
| JacobThreeThree wrote:
| Tables only ever "worked" when compared to the poor
| implementation and browser support of the alternatives of
| its time.
|
| In today's web landscape using tables to center
| categorically fails to work in many scenarios that will
| work with flexbox.
| mixmastamyk wrote:
| They worked great and still do for the vast majority of
| use cases.
|
| The fact it took a quarter century to surpass is not a
| compliment at all. Considering "internet time" (first
| identified in the 90s), it's a disgrace.
| alpaca128 wrote:
| > Relative to what? the window? the container?
|
| I don't think I ever wanted things centered relative to
| anything other than the direct parent, no matter what that
| is. I am sure some cases need it differently, but I don't
| see why those should prevent intuitive defaults.
|
| > A simple attribute cannot work
|
| Can it not work at all or just if one insists on covering
| 100% of cases on the internet with a single comprehensive
| option? I'm not an expert in this so I'm not sure, but I've
| seen a lot of software center items automatically and it
| worked quite well because they didn't assume by default
| that I might push the boundaries of design to new heights
| at any moment.
| hombre_fatal wrote:
| `<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?
| alpaca128 wrote:
| > For example, what does `<div centered>` do when there are
| two children?
|
| Force me to use the advanced option or to wrap the two
| children in a centered container? I am certain this
| wouldn't cover many, many edge cases, but they are called
| edge cases for a reason.
|
| Edit: People can complain about tables etc being the wrong
| approach all they like, in the end those examples are only
| proof that the proper way could be at least as simple for
| the average case.
| parasti wrote:
| And on top of that, flexbox has been widely supported for over
| a decade! The comments here are a wild ride.
| crazygringo wrote:
| 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.
| thr33 wrote:
| 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.
| ComputerGuru wrote:
| 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 wrote:
| 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 wrote:
| 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.
| allannienhuis wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| Always learning something new from Josh W Comeau
| juliusdavies wrote:
| <table align="center"><tr><td><div>Here you
| go!</div></td></tr></table>
| desertlounger wrote:
| Classic!
| divbzero wrote:
| I prefer the simpler: <center>Here you
| go!</center>
| UberFly wrote:
| Can't count how many times I've searched centering in divs over
| the years.
| ChuckMcM wrote:
| 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 wrote:
| 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.
| taeric wrote:
| 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?
| danShumway wrote:
| 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.
| jbs789 wrote:
| This reads like so many comments here. "The comments here are
| amazing for a nominally technical audience" - burn. Followed by
| "look what I did." - I'm awesome. Congrats mate
| chrisweekly wrote:
| 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/
| borbtactics wrote:
| The demo containers and their animation are so cool and useful.
| mstudio wrote:
| 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...
| system2 wrote:
| 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 wrote:
| 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/
| ramoz wrote:
| for the uninitiated:
|
| <div style="display:flex;justify-items:center;align-
| items:center"> <div>I'm centered</div>
|
| </div>
| retrochameleon wrote:
| 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 wrote:
| 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.
| justinzollars wrote:
| Nice intro. I always feel like I'm fighting css.
| t1c wrote:
| I've been doing webdev for a while and this is by far the best
| "centering a div" article I've ever seen.
| nailer wrote:
| TLDR:
|
| place-items: center;
| primer42 wrote:
| Tldr - it's impossible
| divbzero wrote:
| 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._
___________________________________________________________________
(page generated 2024-02-13 23:00 UTC)