Center, Square, Circle

Компонент Center в Chakra UI используется для выравнивания содержимого по центру как по горизонтали, так и по вертикали. Он является оберткой, которая принимает любые дочерние элементы и автоматически располагает их в середине контейнера.

import { Center, Box } from "@chakra-ui/react";

function App() {
  return (
    <Center h="200px" bg="gray.100">
      <Box w="100px" h="100px" bg="blue.500" />
    </Center>
  );
}

Особенности Center:

  • Высота (h) и ширина (w) задаются явно, иначе компонент занимает всю доступную ширину.
  • Вертикальное и горизонтальное центрирование осуществляется автоматически.
  • Поддерживает вложенные элементы, сохраняя центрирование для всех.

С помощью Center легко создавать модальные окна, иконки или блоки, которые всегда остаются визуально центрированными в контейнере.

Square: квадратные блоки

Компонент Square предназначен для создания квадратных элементов с равными шириной и высотой. Он наследует все свойства Box и позволяет задавать размер через size или отдельные параметры w и h, но при этом гарантируется одинаковая сторона.

import { Square } from "@chakra-ui/react";

function App() {
  return (
    <Square size="100px" bg="red.400">
      Квадрат
    </Square>
  );
}

Ключевые моменты Square:

  • size — основной способ задания размера, эквивалентный одновременному указанию ширины и высоты.
  • Поддержка responsive значений, например: size={{ base: "50px", md: "100px" }}.
  • Можно использовать фон, границы и тени так же, как в Box.
  • Можно добавлять вложенные компоненты, которые автоматически центрируются внутри квадрата.

Применяется для кнопок, иконок, карточек и любых элементов, где важно соблюсти квадратную форму без ручного контроля высоты и ширины.

Circle: круглые элементы

Компонент Circle расширяет возможности Square и позволяет создавать идеальные круги. Внутри Circle содержимое автоматически центрируется, а форма всегда остается круглой.

import { Circle } from "@chakra-ui/react";

function App() {
  return (
    <Circle size="80px" bg="green.400">
      A
    </Circle>
  );
}

Особенности Circle:

  • Автоматическое центрирование содержимого.
  • Размер задается через size, как и в Square.
  • Поддержка цветов, границ и теней.
  • Идеально подходит для аватаров, кнопок с иконками, индикаторов.

Можно комбинировать с Center и Square для создания сложных макетов: например, квадратный контейнер с круглым элементом внутри, который всегда будет строго центрирован.

Практическое сравнение

Компонент Форма Центрирование содержимого Основное свойство размера
Center Любая Вертикальное и горизонтальное w и h
Square Квадрат Контент центрируется size или w/h
Circle Круг Контент центрируется size

Использование этих компонентов упрощает создание адаптивных интерфейсов, где точные пропорции и выравнивание элементов критичны. Center, Square и Circle позволяют избавиться от ручного расчета flex, margin или padding, ускоряя верстку и улучшая читаемость кода.

Советы по комбинированию

  • Center внутри Square или Circle позволяет размещать несколько элементов строго по центру.
  • Square можно использовать как основу для Circle, чтобы динамически менять форму.
  • Для адаптивного дизайна стоит использовать responsive size ({ base: ..., md: ... }) вместо фиксированных значений.

Эти три компонента составляют базу для построения визуально строгих и аккуратных интерфейсов с минимальным количеством CSS-кода и полной поддержкой Chakra UI.

Оглавление