---
title: "Just what *is* the best way to center a div?"
publication: "Frontend Focus"
issue: 631
published_at: "2024-02-21"
canonical_url: "https://frontendfoc.us/issues/631"
---

🇪🇺 Plus Apple confirms PWA support changes in the EU. |       

Together with [![Frontend Masters logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_300,h_70/e_make_transparent/co_white,e_outline:5/nk0tfdvalivacz8rw7rt.png)](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss)        

🚀 **Frontend** Focus 

#​631 — February 21, 2024 | [Read on the web](https://frontendfoc.us/issues/631)      

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708511157/igtxxkx8oboww9mxae2o.png)](https://www.joshwcomeau.com/css/center-a-div/)  

[How To Center a Div](https://www.joshwcomeau.com/css/center-a-div/) — What was once a tricky ordeal in CSS is now much easier thanks to lots of new tools — but which one do you reach for? Flexbox, Grid, something else? Josh dives in, and shares the trade-offs between different approaches, and the strategies to use. He notes “_this turned out to be way more interesting than I initially thought_”. The definitive resource to conclude a long running meme in the Web design world? Let's hope! 

Josh W Comeau     [![\](https://copm.s3.amazonaws.com/c3ea8e7c.png)](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss) 

[Tailwind CSS: Write Efficient, Utility-First CSS](https://frontendmasters.com/courses/tailwind-css/?utm_source=email&utm_medium=frontendfocus&utm_content=tailwindcss) — Join Steve Kinney for this detailed video course exploring Tailwind CSS. You'll build real-world components like modals, forms, and page layouts — becoming proficient in creating stunning, responsive, and maintainable UI. 

Frontend Masters sponsor     

[An Update on Apps Distributed in the European Union](https://developer.apple.com/support/dma-and-apps-in-the-eu) — Last week we shared news that Apple looked to be dropping support for Progressive Web Apps for users located in the EU. That news has now sadly been [confirmed in a developer support document](https://developer.apple.com/support/dma-and-apps-in-the-eu#8). 

Apple   

[“It’s Official, Apple Kills Web Apps in the EU”](https://open-web-advocacy.org/blog/its-official-apple-kills-web-apps-in-the-eu/) — Here’s a response to the above news from the Open Web Advocacy group, who are also [asking for feedback from developers and businesses](https://open-web-advocacy.org/apple-attempts-killing-webapps/) who operate online in the EU on how this may impact things. 

Open Web Advocacy     

⚡️ Quick Links 

- 🦊 Firefox 123 is out now, and features [new WebDriver features](https://fxdx.dev/firefox-webdriver-newsletter-123/).
- 🪣 [Chrome 122 is also with us](https://www.youtube.com/watch?v=8fWkUNV-eic), adding improved storage management thanks to the [Storage Buckets API](https://wicg.github.io/storage-buckets/explainer).
- 🎨 The latest candidate recommendation draft of the [CSS Color Module Level 4 is out now](https://www.w3.org/TR/2024/CRD-css-color-4-20240213/).
- 🚰 [▶️ A funny visual analogy](https://twitter.com/thekitze/status/1759465919766536355) for what using a `<div>` as a `<button>` is like.     

📙 **Tutorials, Articles & Opinion** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708519330/sg0lvdlbggmeuonjxgln.png)](https://ericportis.com/posts/2024/okay-color-spaces/)  

[Okay, Color Spaces](https://ericportis.com/posts/2024/okay-color-spaces/) — This is an excellent, fun explainer of color spaces — a worthwhile read if you’re curious about the various color changes coming to CSS. 

Eric Portis   

[What is Utility-First CSS?](https://heydonworks.com/article/what-is-utility-first-css/) — A critical view on so-called 'utility-first' CSS, highlighting skepticism towards its practicality, and noting that whilst it may seem appealing it often complicates things rather than simplifies them. 

Heydon Pickering   

[Build Secure Apps with Clerk's Auth & User Management](https://dub.sh/DlcZfgJ) — Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users. 

Clerk sponsor   [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708512732/txpjegfwnajq36wawqy2.gif)](https://www.javiermorales.dev/blog/dvd) 

[Creating a CSS-Only DVD Screensaver Animation](https://www.javiermorales.dev/blog/dvd) — _No, you’ve been staring at this for five minutes [waiting for it to hit the corner](https://www.youtube.com/watch?v=QOtuX0jL85Y)…_ Anyway, here’s a detailed look at how this classic DVD animation has been recreated, without JavaScript. All presented with dynamic examples and handy code snippets. 

Javier Morales   

[100 Things You Can Do On Your Personal Website](https://jamesg.blog/2024/02/19/personal-website-ideas/) — Do you have a personal site? If not, maybe consider it and then go through this list. 🧡 IndieWeb 

James G   

[Build AI-Powered Web Apps with Firebase Extensions](https://firebase.google.com/codelabs/ai-firebase-extensions#0) 
Umar Hansa   

[Why Do Reflows Negatively Affect Performance?](https://frontendmasters.com/blog/why-do-reflows-negatively-affect-performance/) 
Lydia Hallie  

🔧 **Code, Tools & Resources** 

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708515564/eqjcikgfuqh91tuvqtya.png)](https://nucleoapp.com/svg-flag-icons)  

[SVG Flag Icons](https://nucleoapp.com/svg-flag-icons) — A collection of over 200 country flag icons with one click SVG code-to-clipboard. 

Nucleo   

[Marquee: A Beautiful 'Marquee' Component for React](https://github.com/devnomic/marquee) — Not just for text, which is what we normally associate with the so-called ‘marquee’ effect. You can see some [examples here](https://marquee-dev.vercel.app/), one of which is a _vertical_ marquee. 

Erick Hartanto   

[Open-Source JavaScript Form Builder for PHP](https://surveyjs.io/?utm_source=frontend_focus&utm_medium=email) — Generate dynamic JSON-driven forms using a drag-and-drop form builder UI, and effortlessly send the form data to any PHP application. 

SurveyJS sponsor   [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708508910/ifveqsss1btighxztsrc.png)](https://tempo.formkit.com/) 

[Tempo: An Easier Way to Work with Dates](https://tempo.formkit.com/) — This is a collection of utilities for working with the native Date object. Under the hood, it mines JavaScript’s `Intl.DateTimeFormat` to extract complex data, giving you a simple API to format, parse, and manipulate dates. Good stuff. 

FormKit   

[WXT: Next-Gen Web Extension Framework](https://wxt.dev/) — A framework for creating cross-browser extensions. You can target Chrome, Firefox, Edge and Safari. 

WXT   

[restore-scroll: Restore Scroll Position of Elements on Page Navigation](https://github.com/epicweb-dev/restore-scroll) — This means not only the `<body>` element’s scroll position can be restored, but any scrollable element. 

Kent C. Dodds   

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708512365/xfgxkofv7xmhmg6rlfv4.png)](https://jhildenbiddle.github.io/canvas-size/)  

[canvas-size 2.0: Determine Max Area, Height, Width, and Custom Dimensions of HTML Canvases](https://jhildenbiddle.github.io/canvas-size/) — The Canvas element is broadly supported across browsers but there are differences in the size limitations, which this library can determine for you. [GitHub repo.](https://github.com/jhildenbiddle/canvas-size) 

John Hildenbiddle     

🕰️ ICYMI (_Older links, still worth checking out_) 

- Chen shares how [animating DOM state changes no longer requires a mountain of code](https://12daysofweb.dev/2023/view-transitions/) thanks to the View Transitions API.
- Jake Giltsoff shares [three secrets to good font pairing](https://maketypework.com/the-3-secrets-to-font-pairing/), with plenty of solid examples.
- Did you know you can [use abbreviations for long CSS properties in VS Code](https://www.amitmerchant.com/using-abbreviations-for-long-css-properties-in-vs-code/) and it will automatically expand them?
- Having issues with layout shift? [▶️ This video shares a high-level list of CLS offenders](https://www.youtube.com/watch?v=bffwdyKoS8Q) and may help your thinking.      

🐸 _...and finally_  

[![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1708512096/r3bcusztmz7l8pwzcmvg.png)](https://killedbyapixel.github.io/TinyCode/games/CrossMyHeart/)  

[Cross My Heart](https://killedbyapixel.github.io/TinyCode/games/CrossMyHeart/) — This is an impressive playable 'demake' of arcade classic Frogger (or _Crossy Road_, depending on your generation!) in just 256 bytes. You’ve got to get the 🖤 up the screen using your arrow keys. 

KilledByAPixel    

📬 

**Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). 

--- 

**Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). 

--- 

**Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. 

--- 

Published by Cooper Press Ltd.
Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86).
Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom 

[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)  

[Ipx.](https://frontendfoc.us/open/631/*|UID|*?ipx=t)