Как центрировать абсолютно позиционированный элемент в div?

Question

Я хочу разместить элемент <div> (с position:absolute;) в центре окна браузера. Но у меня возникают проблемы, потому что ширина элемента неизвестна.

Я попробовал следующий CSS-код, но его нужно доработать, так как ширина является адаптивной.

.center {
  left: 50%;
  bottom: 5px;
}

Как мне это сделать?

Answer 1

Это работает для меня:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-inline: auto; 
  width: fit-content;
}

<body>
  <div>
    <div id="content">
      Я контент
    </div>
  </div>
</body>

С помощью этого кода элемент с ID content будет центрирован по горизонтали внутри родительского элемента и будет принимать ширину, соответствующую его содержимому.

Answer 2

В приведенном вами коде HTML используется комбинация стилей position: absolute и position: relative для центрирования содержимого на странице. Позвольте мне объяснить, как это работает.

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

Внешний <div> со стилем position: absolute и left: 50% устанавливает его левую границу на 50% от ширины окна. Это размещает его правую сторону в 50% ширины окна, но не центрирует сам элемент.
Внутренний <div> с position: relative и left: -50% смещает его влево на 50% своей собственной ширины. Таким образом, он оказывается по центру относительно его родительского элемента.
Рамка (border) красного цвета и точечная линия добавляется к внутреннему элементу, чтобы визуально отделить его от фона.

В результате использованных стилей содержимое будет отцентрировано на странице и возможно изменять свои размеры в зависимости от содержимого, что создает эффект "shrink-to-fit".

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

Answer 3

Для.centering текста внутри div с использованием стилей CSS, вы можете применить следующий код:

<div style='position:absolute; left:50%; top:50%; transform: translate(-50%, -50%)'>
  Этот текст выровнен по центру.
</div>

Этот подход позволяет центрировать все объекты внутри div, у которого установлен position типа absolute. Если вам нужно центрировать объекты в контейнере с position типа static или relative, вы можете использовать flexbox. Вот пример:

<div style='display: flex; justify-content: center; align-items: center; height: 100vh;'>
  Этот текст выровнен по центру.
</div>

В этом коде height: 100vh; устанавливает высоту контейнера равной 100% высоты окна браузера, а свойства justify-content и align-items выравнивают содержимое по центру как по горизонтали, так и по вертикали.

Answer 4

Решение с адаптивным дизайном

Предполагаем, что элемент внутри div – это другой div...

Это решение работает хорошо:

<div class="container">
  <div class="center"></div>
</div>

Контейнер может быть любого размера (должен иметь относительное позиционирование):

.container {
    position: relative; /* Важно */
    width: 200px; /* Любая ширина */
    height: 200px; /* Любая высота */
    background: red;
}

Элемент (div) также может быть любого размера (должен быть меньше контейнера):

.center {
    position: absolute; /* Важно */
    top: 50%; /* Позиция Y на полпути */
    left: 50%; /* Позиция X на полпути */
    transform: translate(-50%,-50%); /* Сдвинуть назад на половину (x, y) */
    width: 100px; /* Любая ширина */
    height: 100px; /* Любая высота */
    background: blue;
}

Результат будет выглядеть так. Запустите код:

.container {
    position: relative;
    width: 200px;
    height: 200px;
    background: red;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: blue;
}

<div class="container">
    <div class="center"></div>
</div>

Мне это оказалось очень полезным.

Answer 5

Если кто-то хочет сделать это с помощью одного тега div, вот решение:

Принимаем width равным 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

В этом случае необходимо заранее знать width.

Как центрировать абсолютно позиционированный элемент в div?

5 ответ(ов)

Решение с адаптивным дизайном

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных