CSS Gap Filling 2 (Centering / BFC)

Centering

Horizontal Centering

margin: 0 auto;

Principle: When the margin value is auto, the element tries to take up as much space as possible. For example, margin-left: auto pushes the div as far right as possible.

margin: 0 auto; is equivalent to vertical margin 0, while margin-left: auto and margin-right: auto both being auto, thus the box is squeezed into the horizontal center.

.parent { text-align: center; }

Applies to inline / inline-block elements.

Vertical Centering

.child { height: 100px; line-height: 100px; }

For a single line of text, setting the line-height equal to the container height achieves vertical centering.

General Methods

The most common modern solutions are undoubtedly flex and grid layouts.

Worth noting is the use of the inset property, which I hadn't fully understood before.

/* Method 1: Flex (good performance, widely used) */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Method 2: Grid (most concise) */
.parent {
  display: grid;
  place-items: center;
}

/* Method 3: Absolute positioning + margin: auto (known width & height) */
.child {
  position: absolute;
/*
  inset: 0 (= top: 0; right: 0; bottom: 0; left: 0),
  tells the browser: this element's top/right/bottom/left edges must be flush with the respective edges of its parent container.
  It essentially defines a rectangular area for the element, think of it as a "virtual parent container"
  margin: auto then divides the space evenly both horizontally and vertically inside that area.
*/
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

/* Method 4: Absolute positioning + transform (unknown width & height) */
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

BFC (Block Formatting Context)

Block Formatting Context. Refers to an independent layout environment where elements inside a BFC do not affect those outside, and vice versa.

How to Create

The browser automatically creates a BFC for the root element (<html>). Other common ways:

/* Float */
float: left | right

/* Positioning that takes the element out of the normal flow */
position: absolute | fixed

/* overflow that is not visible */
overflow: hidden | auto | scroll

/* Special values of display */
display: inline-block | table-cell | flow-root

/* Modern layout */
display: flex          /* flex container */
display: inline-flex   /* inline-flex container */
display: grid          /* grid container */
display: inline-grid   /* inline-grid container */

⭐ Best practice: display: flow-root is specifically designed for creating BFCs, with the cleanest semantics and fewest side effects. Much more elegant than overflow: hidden.

Use Cases

Solving parent height collapse. When a parent's height is determined by its children, floating the children can cause the parent to collapse. Adding overflow: hidden to the parent creates a BFC, preventing the collapse.
Solving margin collapsing (the top and bottom margins of blocks sometimes combine (collapse) into a single margin equal to the larger of the two (or just one if they are equal); this behavior is called margin collapsing. Note: elements that are floated or absolutely positioned do not have margin collapse).
By wrapping one of the elements in a BFC container:
```
<div style="margin-bottom: 50px;">A</div>
<div style="display: flow-root;">
  <div style="margin-top: 30px;">B</div>
</div>
```
Preventing an element from being covered by a floated element. A floated element can overlap a following block-level element. Turning that block-level element into a BFC avoids the overlap.
```
.float-box {
  float: left;
  width: 200px;
  height: 100px;
}
.content {
  display: flow-root;  /* does not overlap with floated element */
}
```