Absolute position center: html — How to center a «position: absolute» element

Как центрировать абсолютно позиционированный элемент с помощью CSS — SitePoint

Интернет

    Центрирование абсолютно позиционированного элемента — это задача CSS, которая время от времени возникает. Решение кажется очевидным, как только я это сделал, но я все еще ловлю себя на том, что раз в несколько месяцев гуглил проблему.

    Горизонтальное центрирование статического элемента в CSS обычно выполняется путем установки левого и правого полей на auto , например:

     .myelement {
      поле: 0 авто;
    } 

    Однако это не будет работать с абсолютно позиционированным элементом. Его местоположение определяется относительно самого непосредственного родительского элемента, который имеет position значение абсолютное , относительное или фиксированное .

    В следующем примере относительный красный квадрат имеет число ширина установлена ​​на 40% доступного пространства. Верхний левый угол абсолютно позиционированного синего квадрата расположен на 30 пикселей в ширину и на 10 пикселей вниз:

     .outer {
      положение: родственник;
      ширина: 40%;
      высота: 120 пикселей;
      поле: 20px авто;
      граница: 2px сплошная #c00;
    }
    .внутренний {
      положение: абсолютное;
      ширина: 100 пикселей;
      высота: 100 пикселей;
      верх: 10 пикселей;
      слева: 30 пикселей;
      цвет фона: #00c;
    } 

    Если нас не волнуют точные размеры нашего синего прямоугольника, мы можем опустить ширину и установите те же значения слева и справа . Это эффективно отцентрирует нашу синюю коробку:

     .outer {
      положение: родственник;
      ширина: 40%;
      высота: 120 пикселей;
      поле: 20px авто;
      граница: 2px сплошная #c00;
    }
    .внутренний {
      положение: абсолютное;
      высота: 100 пикселей;
      слева: 30 пикселей;
      верх: 10 пикселей;
      справа: 30 пикселей;
      цвет фона: #00c;
    } 

    Итак, как мы можем центрировать нашу коробку, если она имеет фиксированные размеры? Ответ требует немного нестандартного мышления:

    1. Во-первых, мы используем слева: 50% . В отличие от положения фонового изображения, это переместит левый край синего прямоугольника в центр.
    2. Так как наш блок находится слишком далеко вправо, мы используем отрицательное левое поле, равное половине ширины блока. В нашем примере мы должны установить margin-left на -50px , чтобы переместить блок обратно в нужное место.

    Вот код:

     .outer {
      положение: родственник;
      ширина: 40%;
      высота: 120 пикселей;
      поле: 20px авто;
      граница: 2px сплошная #c00;
    }
    .внутренний {
      положение: абсолютное;
      ширина: 100 пикселей;
      высота: 100 пикселей;
      верх: 10 пикселей;
      слева: 50%;
      поле слева: -50px;
      цвет фона: #00c;
    } 

    Синее поле останется в центре независимо от того, как изменится ширина внешнего элемента.

    Если вам понравилось читать этот пост, вам понравится SitePoint Premium; место для изучения новых навыков и методов от опытных разработчиков. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как CSS Master.

    Комментарии к статье закрыты. У вас есть вопрос о CSS? Почему бы не спросить об этом на нашем форуме?

    Крейг Баклер

    Крейг — внештатный веб-консультант из Великобритании, который создал свою первую страницу для IE2.0 в 1995 году. С тех пор он отстаивает стандарты, доступность и передовые технологии HTML5. Он создал корпоративные спецификации, веб-сайты и онлайн-приложения для компаний и организаций, включая парламент Великобритании, Европейский парламент, Министерство энергетики и изменения климата, Microsoft и другие. Он написал более 1000 статей для SitePoint, и вы можете найти его по @craigbuckler.

      CSS

      2 способа центрирования элемента с абсолютным позиционированием в TailwindCSS

      • Дом
      • Свяжитесь с нами

      Войти

      Добро пожаловать! Войдите в свою учетную запись

      ваше имя пользователя

      ваш пароль

      Забыли пароль?

      Политика конфиденциальности

      Восстановление пароля

      Восстановить пароль

      ваш адрес электронной почты

      Поиск

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

      flex-box в TailwindCSS, но если у вас есть элемент, который расположен на странице absolute , это не сработает. Вот 2 метода центрирования absolute 9Элемент с позиционированием 0019 в TailwindCSS.

      Метод 1: Горизонтальное центрирование элемента с абсолютным позиционированием

      Можно использовать поля и левое , правое позиционирование для центрирования абсолютного позиционированного элемента на странице. В этом методе вы должны установить margin на auto , а затем left , right на 0. Вот пример ниже.

      XHTML

      <дел> <дел>

    1

    2

    3

    4

    5

    6

    7

    8

     

     

        

        

      9000 3

     

    Вот рабочий код, и вы можете проверить вывод на следующем снимке экрана.

    Метод 2: Горизонтальное и вертикальное центрирование абсолютно позиционированного элемента

    Приведенный выше метод центрирует элемент только по горизонтали, но не подходит для вертикального положения. Итак, если вы хотите центрировать элемент с абсолютным позиционированием как по вертикали, так и по горизонтали, вам потребуются дополнительные классы. Вот пример, в котором свойства перевода используются для центрирования элемента absolute как по вертикали, так и по горизонтали.

    XHTML

    <дел> <дел>