Как легко по центруHorizontально расположить <div> с помощью CSS?

В большинстве браузеров этот код сработает:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}

<div class="centre">Некоторый текст</div>

Однако в Internet Explorer 6 вам нужно будет добавить еще один внешний div:

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="layout">
  <div class="centre">Некоторый текст</div>
</div>

Таким образом, добавление внешнего контейнера с классом layout решает проблемы с центрированием в IE6.

Чтобы расположить ваш элемент <div> по центру, используйте следующий код CSS:

.class-name {
    display: block;
    margin: 0 auto;
}

Этот код устанавливает элемент как блочный (display: block) и задает автоматические отступы слева и справа (margin: 0 auto), что центрует элемент внутри родительского контейнера. Убедитесь, что у родительского элемента задана ширина, иначе это правило может не сработать.

Если старые браузеры не являются проблемой, используйте HTML5 / CSS3. Если они представляют собой проблему, применяйте полифиллы и всё равно используйте HTML5 / CSS3. Предполагаю, что у вашего div нет отступов или полей, однако их достаточно легко учесть. Вот код:

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Что это делает:

1. Устанавливает div относительно его контейнера;
2. Позиционирует левую границу div на 50% от ширины его контейнера по горизонтали;
3. Сдвигает его обратно по горизонтали на 50% от собственной ширины div.

Легко представить этот процесс и убедиться, что div в итоге будет горизонтально выровнен по центру. В качестве бонуса вы можете центровать вертикально без дополнительных затрат:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Преимущество этого подхода в том, что вам не нужно делать что-то неинтуитивное, например, рассматривать ваш div как текст, оборачивать его в (часто семантически бесполезный) дополнительный контейнер или задавать фиксированную ширину, что не всегда возможно.

Не забудьте добавить вендорные префиксы для transform, если это необходимо.

Чтобы отцентрировать блок с минимальной шириной, вы можете использовать следующий CSS:

.center {
   margin-left: auto;
   margin-right: auto;
}

.divclass {
   min-width: 200px;
}

В результате, ваш HTML-код может выглядеть так:

<div class="center divclass">содержимое здесь</div>

Таким образом, блок будет центрирован и при этом будет иметь минимальную ширину в 200 пикселей. Обратите внимание, что свойство min-width не поддерживается во всех браузерах глобально, но его можно использовать в данном контексте для задания минимальных размеров вашего элемента.

В вашем вопросе вы указали, что у вас есть блок с классом mydiv, который имеет заданную ширину 200 пикселей и выравнен по центру с помощью свойства margin: 0 auto. Ваш код выглядит следующим образом:

<div class="mydiv">
    I am in the middle
</div>

Согласно вашему описанию, div — это блочный элемент, который по умолчанию занимает всю ширину родительского контейнера. Поэтому, чтобы выровнять его по центру, вы правильно использовали свойство margin: 0 auto, что заставляет браузер автоматически распределить оставшееся пространство по бокам.

Что касается поддержки min-width, вы правы: он поддерживается в Firefox начиная с версии 2, в Safari с версии 3 и в Internet Explorer начиная с версии 7. Для Internet Explorer 6 вы можете использовать различные хакерские приемы CSS или небольшие куски JavaScript, чтобы достичь аналогичного эффекта.

Если у вас есть дополнительные вопросы или требуется помощь с другими аспектами CSS или HTML, пожалуйста, задайте их!