From 0b91617b1ace933d20599457cc61096815f07ee4 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 8 May 2024 16:05:52 +0300 Subject: [PATCH] Merge CSS centering snippets --- .vscode/spellright.dict | 1 + content/collections/css/centering.yaml | 17 --- content/redirects.yaml | 27 +++-- content/snippets/css/s/centering.md | 102 +++++++++++++++--- .../snippets/css/s/display-table-centering.md | 42 -------- content/snippets/css/s/flexbox-centering.md | 29 ----- content/snippets/css/s/grid-centering.md | 29 ----- content/snippets/css/s/transform-centering.md | 41 ------- 8 files changed, 111 insertions(+), 177 deletions(-) delete mode 100644 content/collections/css/centering.yaml delete mode 100644 content/snippets/css/s/display-table-centering.md delete mode 100644 content/snippets/css/s/flexbox-centering.md delete mode 100644 content/snippets/css/s/grid-centering.md delete mode 100644 content/snippets/css/s/transform-centering.md diff --git a/.vscode/spellright.dict b/.vscode/spellright.dict index 1f037eb9f22..2f31b92951d 100644 --- a/.vscode/spellright.dict +++ b/.vscode/spellright.dict @@ -29,3 +29,4 @@ fileglob fixup autosquashed unstage +flexbox diff --git a/content/collections/css/centering.yaml b/content/collections/css/centering.yaml deleted file mode 100644 index 9740b7cb485..00000000000 --- a/content/collections/css/centering.yaml +++ /dev/null @@ -1,17 +0,0 @@ -slug: css/centering -name: CSS Centering -featured: true -snippetIds: - - css/s/centering - - css/s/flexbox-centering - - css/s/grid-centering - - css/s/transform-centering - - css/s/display-table-centering -splash: keyboard-coffee -description: >- - Centering content with CSS is not always straighforward. This snippet - collection contains a few handy tips and tricks to help you center anything - anywhere. -shortDescription: >- - A collection of techniques for centering HTML elements in any situation using - CSS. diff --git a/content/redirects.yaml b/content/redirects.yaml index a973d37ca73..28fe1e81fe4 100644 --- a/content/redirects.yaml +++ b/content/redirects.yaml @@ -142,9 +142,6 @@ - from: /c/web-development/* to: /web-development/:splat status: 301! -- from: /c/css-centering/* - to: /css/centering/:splat - status: 301! - from: /c/css-hover-effects/* to: /css/hover-effects/:splat status: 301! @@ -721,9 +718,6 @@ - from: /articles/s/react-use-state-with-label to: /react/s/use-state-with-label status: 301! -- from: /articles/s/css-centering - to: /css/s/centering - status: 301! - from: /articles/s/css-clamp to: /css/s/clamp status: 301! @@ -2869,3 +2863,24 @@ - from: /git/s/switch-to-last-branch to: /git/s/switch-to-branch status: 301! +- from: /c/css-centering/* + to: /css/s/centering + status: 301! +- from: /c/css-centering/* + to: /css/s/centering + status: 301! +- from: /articles/s/css-centering + to: /css/s/centering + status: 301! +- from: /articles/s/css-centering + to: /css/s/flexbox-centering + status: 301! +- from: /articles/s/css-centering + to: /css/s/grid-centering + status: 301! +- from: /articles/s/css-centering + to: /css/s/transform-centering + status: 301! +- from: /articles/s/css-centering + to: /css/s/display-table-centering + status: 301! diff --git a/content/snippets/css/s/centering.md b/content/snippets/css/s/centering.md index 7d557d7ad74..6353bf20003 100644 --- a/content/snippets/css/s/centering.md +++ b/content/snippets/css/s/centering.md @@ -1,26 +1,102 @@ --- -title: 4 ways to center content with CSS -shortTitle: Centering content with CSS +title: Centering content with CSS type: story language: css tags: [layout] -cover: mountain-lake -excerpt: Centering content with CSS might often feel tricky. Here are 4 easy tricks you can use in your code today. -dateModified: 2021-09-28 +cover: malibu +excerpt: Centering content with CSS might often feel difficult. Here are 4 easy ways you can do it. +dateModified: 2024-05-07 --- -## Flexbox +_How to center a div_ has become a little bit of a joke in the web development community, and for good reason. Not only is it a common task, but it can also be a bit tricky to get right, especially when you're new to CSS. Luckily, modern CSS solutions exist for pretty much any scenario you might encounter. -Using flexbox to vertically and horizontally center content is usually the **preferred method**. All it takes is three lines of code in the container element to set `display: flex` and then center the child element vertically and horizontally using `align-items: center` and `justify-content: center` respectively. You can view the [Flexbox centering snippet](/css/s/flexbox-centering) for the code and examples. +## Flexbox centering -## Grid +Using **flexbox** to vertically and horizontally center content is usually the **preferred method**. All it takes is three lines of code in the container element to set `display: flex` and then center the child element vertically and horizontally using `align-items: center` and `justify-content: center` respectively. -Using the grid module is very similar to flexbox and also a common technique, especially if you are **already using grid in your layout**. The only difference from the previous technique is the `display` which is set to `grid` instead. You can view the [Grid centering snippet](/css/s/grid-centering) for the code and examples. +```html +
+
Content
+
+``` -## Transform +```css +.flexbox-centering { + display: flex; + justify-content: center; + align-items: center; +} +``` -Transform centering uses, as the name implies, CSS transforms to center an element. It depends on the container element having a `position: relative`, allowing the child element to utilize `position: absolute` to position itself. Then `left: 50%` and `top: 50%` are used to offset the child element and `transform: translate(-50%, -50%)` to negate its position. You can view the [Transform centering snippet](/css/s/transform-centering) for the code and examples. +https://codepen.io/chalarangelo/pen/wvbwQKg -## Table +## Grid centering -Last but not least, table centering is an older technique which you might favor when working with **older browsers**. It depends on the use of `display: table` in the container element. This allows the child element to use `display: table-cell` in combination with `text-align: center` and `vertical-align: middle` to center itself horizontally and vertically. You can view the [Display table centering snippet](/css/s/display-table-centering) for the code and examples. +Using the **grid module** is very similar to flexbox and also a common technique, especially if you are **already using grid in your layout**. The only difference from the previous technique is that you use `display: grid` in the container element and then center the child element the same way as before. + +```html +
+
Content
+
+``` + +```css +.grid-centering { + display: grid; + justify-content: center; + align-items: center; +} +``` + +https://codepen.io/chalarangelo/pen/OJYLaNb + +## Transform centering + +Transform centering uses, as the name implies, **CSS transforms** to center an element. It depends on the container element having a `position: relative`, allowing the child element to utilize `position: absolute` to position itself. Then `left: 50%` and `top: 50%` are used to **offset** the child element and `transform: translate(-50%, -50%)` to **negate** its position. + +```html +
+
Content
+
+``` + +```css +.transform-centering { + position: relative; +} + +.transform-centering > .content { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +``` + +https://codepen.io/chalarangelo/pen/OJYLapp + +## Table centering + +Last but not least, **table** centering is an older technique which you might favor when working with **older browsers**. It depends on the use of `display: table` in the container element, making it behave like a `` element. This allows the child element to use `display: table-cell`, behaving like a `
`, in combination with `text-align: center` and `vertical-align: middle` to center itself horizontally and vertically. Note that the parent element must have a fixed `width` and `height`. + +```html +
+
Content
+
+``` + +```css +.table-centering { + display: table; + height: 100%; + width: 100%; +} + +.table-centering > .content { + display: table-cell; + text-align: center; + vertical-align: middle; +} +``` + +https://codepen.io/chalarangelo/pen/jOoNQmZ diff --git a/content/snippets/css/s/display-table-centering.md b/content/snippets/css/s/display-table-centering.md deleted file mode 100644 index 763c3d61d01..00000000000 --- a/content/snippets/css/s/display-table-centering.md +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Display table centering -type: snippet -language: css -tags: [layout] -cover: malibu -dateModified: 2020-12-30 ---- - -Vertically and horizontally centers a child element within its parent element, using `display: table`. - -- Use `display: table` to make the `.center` element behave like a `` element. -- Set `height` and `width` to `100%` to make the element fill the available space within its parent element. -- Use `display: table-cell` on the child element to make it behave like a `
` elements. -- Use `text-align: center` and `vertical-align: middle` on the child element to center it horizontally and vertically. -- The outer parent (`.container`) must have a fixed `width` and `height`. - -```html -
-
Centered content
-
-``` - -```css -.container { - border: 1px solid #9C27B0; - height: 250px; - width: 250px; -} - -.center { - display: table; - height: 100%; - width: 100%; -} - -.center > span { - display: table-cell; - text-align: center; - vertical-align: middle; -} -``` diff --git a/content/snippets/css/s/flexbox-centering.md b/content/snippets/css/s/flexbox-centering.md deleted file mode 100644 index fc03e4bf7e9..00000000000 --- a/content/snippets/css/s/flexbox-centering.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Flexbox centering -type: snippet -language: css -tags: [layout] -cover: basket-paper -dateModified: 2020-12-30 ---- - -Horizontally and vertically centers a child element within a parent element using flexbox. - -- Use `display: flex` to create a flexbox layout. -- Use `justify-content: center` to center the child horizontally. -- Use `align-items: center` to center the child vertically. - -```html -
-
Centered content.
-
-``` - -```css -.flexbox-centering { - display: flex; - justify-content: center; - align-items: center; - height: 100px; -} -``` diff --git a/content/snippets/css/s/grid-centering.md b/content/snippets/css/s/grid-centering.md deleted file mode 100644 index 67c82a48fd3..00000000000 --- a/content/snippets/css/s/grid-centering.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Grid centering -type: snippet -language: css -tags: [layout] -cover: work-hard-computer -dateModified: 2020-12-30 ---- - -Horizontally and vertically centers a child element within a parent element using `grid`. - -- Use `display: grid` to create a grid layout. -- Use `justify-content: center` to center the child horizontally. -- Use `align-items: center` to center the child vertically. - -```html -
-
Centered content.
-
-``` - -```css -.grid-centering { - display: grid; - justify-content: center; - align-items: center; - height: 100px; -} -``` diff --git a/content/snippets/css/s/transform-centering.md b/content/snippets/css/s/transform-centering.md deleted file mode 100644 index 53faa092ef0..00000000000 --- a/content/snippets/css/s/transform-centering.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Transform centering -type: snippet -language: css -tags: [layout] -cover: flower-camera -dateModified: 2020-12-30 ---- - -Vertically and horizontally centers a child element within its parent element using CSS transforms. - -- Set the `position` of the parent to `relative` and that of the child to `absolute` to place it in relation to its parent. -- Use `left: 50%` and `top: 50%` to offset the child 50% from the left and top edge of the containing block. -- Use `transform: translate(-50%, -50%)` to negate its position, so that it is vertically and horizontally centered. - -> [!NOTE] -> -> The fixed `height` and `width` of the parent element is for demonstration purposes only. - -```html -
-
Centered content
-
-``` - -```css -.parent { - border: 1px solid #9C27B0; - height: 250px; - position: relative; - width: 250px; -} - -.child { - left: 50%; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - text-align: center; -} -```