CSS FAQs

Even experienced developers encounter tricky CSS problems. This lesson covers the most common CSS issues and their reliable solutions.

1. Centering: The Many Ways

Centering is one of the most frequently asked CSS questions. The right approach depends on what you are centering and how.

Horizontal Centering (Block Elements)

For block elements with a set width:

.block-center { margin: 0 auto; }

For inline or inline-block elements:

.parent { text-align: center; }

Vertical Centering (Single Line Text)

.button { height: 50px; line-height: 50px; text-align: center; }

Complete Centering (Vertical + Horizontal)

Method 1: Flexbox (Modern, Best) — works for any content:

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

Method 2: CSS Grid (Modern, Best):

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

Method 3: Absolute Positioning + Transform — works when parent has position: relative:

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Method 4: Grid with Auto Margins:

.parent { display: grid; }
.child { margin: auto; }

2. Equal Height Columns

Getting columns to have the same height was a major headache before Flexbox.

Flexbox Solution (Best):

.row { display: flex; }
.column { flex: 1; padding: 20px; }

All columns automatically have equal height because Flexbox stretches items by default.

Grid Solution:

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }

Grid cells in the same row are automatically equal height.

3. Sticky Footer

A footer that stays at the bottom when content is short and pushes down when content is long.

Flexbox Solution (Best):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
main { flex: 1; }  /* fills remaining space */
footer { padding: 20px; }

Grid Solution:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

4. Browser Compatibility

Different browsers may render CSS differently. Key strategies:

Use a CSS Reset or Normalize

• CSS Reset — removes all default browser styles (e.g., * { margin: 0; padding: 0; })
• Normalize.css — makes default styles consistent across browsers while keeping useful defaults

Popular: @import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');

Vendor Prefixes

Some newer CSS features require vendor prefixes for older browsers:

.box {
  -webkit-transform: rotate(45deg);  /* Chrome, Safari, Edge */
  -moz-transform: rotate(45deg);     /* Firefox */
  -ms-transform: rotate(45deg);      /* Internet Explorer */
  -o-transform: rotate(45deg);       /* Opera */
  transform: rotate(45deg);          /* Standard (last) */
}

Use Autoprefixer (via build tools like PostCSS) to handle prefixes automatically.

Feature Detection with @supports

@supports (display: grid) {
  .container { display: grid; }
}
 
@supports not (display: grid) {
  .container { display: flex; }
}

Can I Use

Always check caniuse.com before using new CSS features to see browser support.

5. CSS Reset vs Normalize.css

| Aspect | CSS Reset | Normalize.css | |--------|-----------|---------------| | Approach | Removes ALL default styles | Preserves useful defaults, normalizes inconsistencies | | Headings | Removes all sizing | Keeps meaningful sizing, consistent across browsers | | Lists | Removes bullets/margin | Keeps bullets, normalizes spacing | | Body margin | Removes it | Keeps 8px margin (consistent across browsers) | | Use case | You want full control from scratch | You want a consistent baseline without losing defaults |

Many developers use a combination: Normalize.css plus a small custom reset.

6. Z-Index Stacking Context

z-index is simple in theory but confusing in practice because of stacking contexts.

Key rules:

• z-index only works on positioned elements (relative, absolute, fixed, sticky)
• Each positioned element with a z-index value creates a new stacking context
• Elements in one stacking context cannot interleave with elements in another

Common trap: You set z-index: 999999 on an element, but it stays behind something else. The issue is likely that the element is in a different stacking context (a parent has its own z-index).

/* This z-index might not work as expected */
.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }  /* only within parent's context */

Opacity and transform also create stacking contexts: opacity: 0.99 or transform: scale(1) can create a new stacking context, trapping child z-index values.

7. Specificity Wars

When styles don't apply as expected, specificity is usually the culprit.

Debugging checklist:

1. Is the selector correct? (check for typos)
2. Is a more specific selector overriding yours? (check ID selectors)
3. Is !important being used elsewhere?
4. Is the rule coming from a later stylesheet?
5. Is the property inherited? (some properties don't inherit)

The !important trap:

Avoid !important except for utility classes (like .hidden { display: none !important; }). Overusing !important leads to specificity wars where the only way to override is with more !important.

8. Variable Fonts

Variable fonts are a modern advancement that allows a single font file to behave like multiple fonts:

@font-face {
  font-family: 'MyVariableFont';
  src: url('RobotoFlex.woff2') format('woff2');
  font-weight: 100 900;  /* range instead of single value */
  font-stretch: 75% 125%;
}
 
body {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 350;  /* any number between 100 and 900 */
}

Variable fonts reduce page weight (one file instead of multiple weights) and enable smooth animations between weights.