Centre a box, two ways

Css

Grid is one line. Flex is three and gives you control over the axes separately.

.centre-grid {
  display: grid;
  place-items: center;
}

.centre-flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

Download

Web & CSS layout centring flexbox grid chris

More in Web & CSS

Responsive images that do not blow the bandwidth budget Web & CSS srcset lets the browser pick; sizes tells it how wide the image will actually be rendered. A semantic, accessible form field Web & CSS The label is tied to the input by id, and the hint is announced with it via aria-describedby. Visually hidden, still read aloud Web & CSS Hides a label from sight while leaving it in the accessibility tree. display:none would remove it from both. Respect a reduced-motion preference Web & CSS One rule that disables animation for people who asked their system for less of it. Responsive grid without media queries Web & CSS auto-fill with minmax reflows on its own, so the column count follows the container rather than a breakpoint list. Truncate text to a number of lines Web & CSS Ellipsis after two lines. The -webkit- prefixes are still required despite being supported everywhere.

Random picks

Count lines of code by extension Shell A quick census of a repository without installing a tool for it. Generate an SSH key and add it to the agent Security Ed25519 rather than RSA: shorter, faster, and no key-size decision to get wrong. Pretty-print and query JSON Text Processing jq for the common cases: reformat, pick a path, filter an array, and reshape. A GitHub Actions workflow for a Node project Build & CI Caches the dependency install, runs on a matrix of versions, and fails the build on a lint error. List branches merged into main Git Finds the branches that are safe to delete, and the ones that are not. A README that people actually read Data Formats The order matters more than the length: what it is, how to run it, how to develop on it. Open an SSH tunnel to a remote database Networking Forwards a local port through a bastion so a client can connect as if the database were local. Cache busting with a content hash Build & CI Names the built file after its contents so a deploy invalidates the cache without a version bump.