Как отцентрировать div через padding?

Способы центрирования с padding

На самом деле, padding не идеален для центрирования элементов, так как это увеличивает размер контейнера. Но если нужна именно эта техника, вот несколько подходов.

Метод 1: Padding + Box-sizing

// Добавляем padding так, чтобы элемент казался центрированным
.container {
  width: 300px;
  padding: 50px;
  box-sizing: border-box;  // Важно! Padding включается в width
}

// Результат: контейнер будет 300px, а содержимое отступит на 50px со всех сторон

Метод 2: Равное padding со всех сторон

// Для вертикального и горизонтального центрирования через padding
.centered {
  width: 200px;
  height: 200px;
  padding: 50px;  // Одинаковое со всех сторон
  box-sizing: border-box;
  background: lightblue;
}

// Это подойдет, если нужно создать "air space" вокруг контента

Метод 3: Asymmetric padding для смещения

// Асимметричное padding для смещения элемента
.shifted {
  padding-left: 100px;   // Смещаем вправо
  padding-top: 50px;     // Смещаем вниз
  padding-right: auto;
  padding-bottom: auto;
}

Но лучше использовать современные методы

Честно говоря, для центрирования есть намного лучшие решения. Я рекомендую использовать Flexbox или Grid:

// Способ 1: Flexbox (для центрирования контента внутри контейнера)
.container {
  display: flex;
  justify-content: center;   // Горизонтальное центрирование
  align-items: center;       // Вертикальное центрирование
  height: 300px;
  width: 300px;
}

// Способ 2: CSS Grid
.container {
  display: grid;
  place-items: center;  // Одна строка вместо двух строк flexbox
  height: 300px;
  width: 300px;
}

// Способ 3: Абсолютное позиционирование с margin auto
.container {
  position: relative;
  height: 300px;
  width: 300px;
}

.centered {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 150px;
  height: 150px;
}

Для текста внутри div'а

Если нужно центрировать текст или inline элементы:

// Центрирование текста через padding
.text-container {
  padding: 20px;
  text-align: center;  // Горизонтальное центрирование текста
  line-height: 50px;   // Приблизительное вертикальное центрирование
}

// Но лучше использовать flexbox
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100px;
}

Реальный пример из практики

// В Next.js/React компоненте
export function CenteredBox() {
  return (
    <div className="flex items-center justify-center h-screen w-screen">
      <div className="bg-white p-8 rounded-lg shadow-lg">
        <h1>Отцентрированный контент</h1>
        <p>Это намного лучше, чем padding!</p>
      </div>
    </div>
  );
}

Итого: padding может использоваться для добавления пространства вокруг элемента, но для истинного центрирования нужно использовать Flexbox, Grid или absolute positioning. Padding просто увеличивает размер контейнера, а не центрирует содержимое.