абсолютное позиционирование с процентами 50%

Question

Я нашел anwswer от этого: Absolute positioning with percentages giving unexpected results

, но ответ не совсем верно показывает на моем экране

Вот jsFiddle от этого ответа.

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    position: relative; 
} 

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
} 

Я имею этот вопрос, 50% не половина ширины родителя, если кто-то может помочь?

Answer 1

Он правильно позиционирует элемент на 50% - в этот момент находится верхний левый угол элемента item. Если вы хотите, чтобы полностью его в центре абсолютно, вам нужно добавить отрицательный левый край половинной item ширины:

#item { 
    border: 1px dashed purple; 
    position: absolute; 
    left: 50%; 
    margin-left: -20px; 
} 

Если это не будет, чтобы удовлетворить ваши потребности, посмотреть в использовании text-align: center и margin: 0 auto в качестве опции вместо. В вашем jsFiddle не совсем ясно, какова конечная цель.

Answer 2

С точки зрения положения пикселя x и y элемент div расположен на расстоянии 50% от ширины вашего контейнера div (то есть 50 пикселей слева от контейнера 100px).

Если вы увеличиваете ширину вашего контейнера, вы увидите позиции позиции элемента соответственно.

Answer 3

Используйте следующий стиль. Там нет необходимости в абсолютных, так и отрицательных оцененных стилей:

#container { 
    border: 1px solid red; 
    height: 100px; 
    width: 100px; 
    overflow: hidden; 
    text-align: center; 
} 

#item { 
    border: 1px dashed purple; 
    display: inline-block; 
    margin: 0 auto; 
} 

Fiddle