Уловка: центрировать абсолютную позицию div

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

Несколько человек спрашивали меня, как центрировать абсолютно позиционированный div, и ответ очень прост:

  1. Мы задаем div фиксированной ширины. Пример: 500 пикселей.
  2. Мы абсолютно позиционируем div, оставив 50% Пример: позиция: абсолютная; слева: 50%;
  3. Мы вычитаем половину того, что он измеряет с запасом. Пример: margin-left: -250px;

В результате получается идеально отцентрованный, абсолютно позиционированный div.


Оставьте свой комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

*

*

  1. Ответственный за данные: Мигель Анхель Гатон
  2. Назначение данных: контроль спама, управление комментариями.
  3. Легитимация: ваше согласие
  4. Передача данных: данные не будут переданы третьим лицам, кроме как по закону.
  5. Хранение данных: база данных, размещенная в Occentus Networks (ЕС)
  6. Права: в любое время вы можете ограничить, восстановить и удалить свою информацию.

  1.   Иван Лира сказал

    Спасибо большое .. как вы говорите что-то такое простое и что несмотря на время, все еще остается автором многих головных болей.
    Ваш пост мне очень пригодился, большое вам спасибо.

  2.   початок сказал

    Большое спасибо вам !!!

  3.   Глброман сказал

    Хороший вклад, он мне очень помог, спасибо

  4.   ЛУКАСГ сказал

    Какое безумие он мне служил: D

  5.   победитель сказал

    Отлично, спасибо…

  6.   Вениамин сказал

    Очень хорошо, Карлос.

  7.   Марио Лозано сказал

    отличная информация

  8.   Франк Кок сказал

    Спасибо, это послужило мне

  9.   выжимки сказал

    Вы спасли меня!!! Спасибо :)

  10.   Дэниэлфлойд сказал

    Спасибо, дядя, это мне очень помогло !!, это мое отсутствие воображения.

  11.   Дамиан сказал

    большое спасибо !!!!! этот трюк всегда помогает мне хаха

  12.   o сказал

    большое спасибо отличный друг

  13.   Крисмарт Анжи сказал

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

    абсолютный;
    осталось: 50%;
    поле слева: -100px;

    это будет половина.

  14.   Эдгар Чуно сказал

    Вклад оценен, мне он очень помог, привет!

  15.   Мириам Джесс сказал

    Очень хороший вклад мне очень помог, тысяча благодати!