Как абсолютное положение элемента с процентами?

Question

У меня есть элемент, который я пытаюсь установить абсолютное положение в центр и прямо у основания. Я делаю 50% справа или слева, кажется, немного не в центре.

На этом снимке экрана вы можете видеть, что он находится немного слева от центра.

a.down { 
    font-size:70px; 
    color:#fff; 
    text-align: center; 
    bottom:5%; 
    position: absolute; 
    right: 50%; 
} 
<a href="#we-are-the-leader" class="down"> 
    <i class="fa fa-angle-down"></i> 
</a> 

Answer 1

Если вы готовы использовать CSS преобразования, решение чрезвычайно прямо вперед:

a.down { 
    font-size:70px; 
    color:#fff; 
    text-align: center; 
    bottom:5%; 
    position: absolute; 
    right: 50%; 
    transform: translateX(50%); 
} 

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

Если вы используете left: 50%, вместо этого используйте отрицательное значение для перевода.

Answer 2

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

margin-right: -35px; 

Однако это требует, чтобы вы знали ширину вашего пункта.

Демо:

a.down { 
 
    font-size:70px; 
 
    text-align: center; 
 
    bottom:5%; 
 
    position: absolute; 
 
    right: 50%; 
 
} 
 

 
/* Added for demo: */ 
 
.fa-angle-down:before { 
 
    content: '■'; 
 
} 
 

 
a.down { 
 
    border: 1px solid red; 
 
    width: 70px; 
 
    margin-right: -35px; 
 
}

<a href="#we-are-the-leader" class="down"> 
 
    <i class="fa fa-angle-down"></i> 
 
</a>

Answer 3

Это решение будет центром любого контента вы размещаете в обертке.

HTML:

<div class="my-class"> 
    <a href="#we-are-the-leader" class="down"> 
     <i class="fa fa-angle-down"></i> 
    </a> 
</div> 

CSS:

.my-class { 
    font-size:70px; 
    text-align: center; 
    bottom:5%; 
    position: absolute; 
    width: 100%; 
} 

Примечание: Ширина устанавливается на 100%.

Answer 4

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

body { 
 
    background: navy; 
 
} 
 
a.down { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 5%; 
 
    margin: auto; 
 
    display: table; 
 
    font-size: 70px; 
 
    color: #fff; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 

 
<a href="#we-are-the-leader" class="down"> 
 
    <i class="fa fa-angle-down"></i> 
 
</a>

Answer 5

Вот четыре возможных пути, которые я могу думать ...

1. Используйте calc() на левом положении. Вам нужно знать ширину элемента ...
2. Используйте translateX() в левой позиции и добавьте отрицательный процент. Не нужно знать ширину элемента.
3. Используйте простую margin-left в левой позиции и установите ее на отрицательную половину ширины элемента. Вы должны знать ширину элемента ...
4. Set left & right на 0 и использовать margin: auto. Нет необходимости знать ширину элемента ...

Примеры (все элементы один над другим, из-за тех же позиций)

CodePen Demo

a.down { 
    font-family: 'FontAwesome'; 
    position: absolute; 
    bottom: 5%; 
    font-size: 70px; 
    color: #fff; 
    text-align: center; 
    text-decoration: none; 
} 

a.down:before { 
    content: "\f107"; 
} 

a.down-1 { 
    left: calc(50% - 22.5px); 
} 

a.down-2 { 
    left: 50%; 
    transform: translateX(-50%); 
} 

a.down-3 { 
    left: 50%; 
    margin-left: -22.5px; 
} 

a.down-4 { 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

Answer 6

Вот мое предположение: Попробуйте обернуть тэг 'a' в div, «согнутый в 1», и пометить 0 по вертикали и немного по горизонтали (попробуйте найти ваш лучший% для центрирования div!) Так же, как это:

.center{flex : 1; 
margin:0 30%;} 

с HTML внутри этого:

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

Попробуйте.

https://jsfiddle.net/LsgL07en/46/