Content centring in CSS

Content centring in CSS

methods and tricks for centring

5 methods from web.dev

These five techniques grasped from https://web.dev/centering-in-css/.

Content centre

.content-center {
  display: grid;
  place-content: center;
  gap: 1ch;
}

It’s concise to use the display: grid and place-content: center shorthand, which centres and justifiers children collectively.

Gentle flex

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;

Gentle flex is a truer centring-only strategy, all items are stacked, centred, and spaced. Unlike place-content: center, no children’s box sizes are changed during the centring.

Autobot

.autobot {
  display: flex;
}

.autobot > * {
  margin: auto;
}

The container is set to flex with no alignment styles, while the direct children are styled with auto margins (margin: auto working on all sides of the element).

Fluffy centre

.fluffy-center {
  padding: 10ch;
}

This is the only centring technique by far that’s entirely element owned. Great for word or phrase-centric centring, tags, pills, buttons, and more.

Pop & plop

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Absolute positioning pops the element out of normal document flow. “Plopping” that place it on top of other elements. This is a classic centring technique that’s flexible and dynamic to content size.

Vertically centring

Vertical plop

.item {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Just the vertical part (moving along the Y-axis) of the last centring method.

Tables and vertical align

CSS supports the vertical-align property for content placed inside table cells. Better for usages in table elements only.

.container {
  display: table;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

Flex items and align self

This solution gives you the freedom to vertically centre only one element inside a flexbox. It makes use of the flex property, align-self, to place the element at the centre.

.container {
  display: flex;
}

.center {
  align-self: center;
}

Flex container and margin auto

Another method to centre a single element in a flex container is setting its margin to auto.

.container {
  display: flex;
}

.item {
  margin: auto;
}

Ghost items inside a flex container

You can stack multiple items inside the flexbox and use ghost elements (content: "") to push them to the centre.

.container {
  display: flex;
  flex-direction: column;
}

.container::before,
.container::after {
  content: "";
  flex: 1;
}

Wrapping up

Reviewing these centring techniques helps me tackle different issues when replacing elements. If you have more tricks, don’t forget to share with me 🤠.

THE END
Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion . This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

Practising closures in JavaScript

JavaScript Notes

2018.12.17

Practising closures in JavaScript

JavaScript is a very function-oriented language. As we know, functions are first class objects and can be easily assigned to variables, passed as arguments, returned from another function invocation, or stored into data structures. A function can access variable outside of it. But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created? Also, what happens when a function invoked in another place - does it get access to the outer variables of the new place?