Трик: центриране на абсолютна позиция на div

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

Повече от един човек ме е питал как да центрирам абсолютно позициониран div и отговорът е много прост:

  1. Даваме на div фиксирана ширина. Пример: 500px
  2. Абсолютно позиционираме div с останали 50%. Пример: позиция: абсолютна; лява: 50%;
  3. Изваждаме половината от измереното с марж. Пример: поле-ляво: -250px;

Резултатът е идеално центриран, абсолютно позициониран div.


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

15 коментара, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

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

  1.   Иван Лира каза той

    Благодаря ви много .. докато казвате нещо толкова просто и че въпреки течението на времето все още е автор на много главоболия.
    Вашият пост беше много полезен за мен, благодаря ви много.

  2.   шушулка каза той

    Благодаря ти много !!!

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

    Добър принос, много ми послужи, благодаря

  4.   LUCASG каза той

    Какъв страхотен луд ми сервира: D

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

    Отлично благодаря ...

  6.   най-малкото дете каза той

    Много добър Карлос.

  7.   Изображение на резервоар на Mario Lozano каза той

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

  8.   Франк Кок каза той

    Благодаря ти, служеше ми

  9.   джибри каза той

    Ти ме спаси!!! Благодаря ти :)

  10.   Даниелфлойд каза той

    Благодаря ти чичо, много ми помогна !!, онази моя липса на въображение.

  11.   Дамян каза той

    Благодаря ти много !!!!! този трик винаги ми помага хаха

  12.   o каза той

    благодаря ви много отличен приятел

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

    Това не е центрирано, всичко зависи от оригиналния размер на основния div елемент, който го караме да расте в зависимост от това какво е поставено вътре, за мен беше по-полезно да използвам това, отколкото визуално, ако го виждам още по-центриран и отзивчив:

    абсолютен;
    ляво: 50%;
    margin-left: -100px;

    това би било наполовина.

  14.   Едгар cjuno каза той

    Приносът е оценен, наистина ми помогна, поздрави!

  15.   Мириам Джес каза той

    Много добър принос ми помогна много, хиляда благодат!