Как вертикально центрировать текст в CSS?

Question

Accepted Answer

## Ядро темы

Зависит от однострочности и контейнера.

```css
/* однострочный в фиксированной высоте */
.pill {
  height: 2.5rem;
  line-height: 2.5rem; /* осторожно с многострочным */
}
/* универсально */
.box {
  display: flex;
  align-items: center; /* вертикаль */
  justify-content: center; /* горизонталь, если нужно */
  min-height: 4rem;
}
/* grid */
.box { display: grid; place-items: center; }
```

Старый трюк с `table-cell` + `vertical-align: middle` почти не нужен.

## Итог

Для UI по умолчанию Flex/Grid. `line-height = height` — только для простых однострочных случаев.