Как прижать блок с position: absolute к низу и выровнять по центру?

Question

[Иван Тарасов]

Нужно отцентровать блок с Абсолютным позиционированием и при этом чтобы он был прижат к низу.
В блоке также есть ещё один блок с float: left.
В общих чертах обрисовал тут: https://jsfiddle.net/948hbquy/3/
p.s. размер блока с абсолютным позиционированием может меняется, поэтому добавление в код:
left:50%; margin-left: -XXpx; думаю не будет уместно.
Подскажите как быть?

Answer 1

[HamSter]

{  
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

Answer 2

[Владислав Безенсон]

Можно попробовать сделать так:

left: 50%;
transform: translateX(-50%);

https://jsfiddle.net/948hbquy/4/

Но если у вас ширина блока нечетного количества пикселей, то его размоет. Второе вариант - черный блок завернуть в другой блок и уже ему делать абсолютное позиционирование. А черный отцентрировать через margin: 0 auto;

Comments

[Apelsin4ik29]

Спасибо за полезный совет. Вы мне очень помогли.

Answer 3

[Борис Шепелев]

В вашем коде надо добавить:

.abs {
  position: absolute;
  height: 50px;
  width: 50px;
  background: black;
  bottom: 0;
  color: #fff;
  left:50%;
  margin-left:-25px;
}

Но Я бы рекомендовал внизу сделать блок на всю ширину, который будет прижать к низу! с свойствами: text-align:center; А внутри него другой блок с свойствами display:inline-block; и тогда он станет по центру, и привязываться к действительным размерам не придется.

Answer 4

[Иван Тарасов]

Прошу прощения за оффтоп ... но как тут оценивать и чей ответ отмечать решением непонимаю.
Оба помогли. HamSter - первее ответил, но Владислав Безенсон, дал более развернутый ответ и два варианта решения ..

Comments

[V Sh.]

Отмечай оба, если помогли оба.

[Иван Тарасов]

Спасибо! Я тут совсем недавно и думал что только одно решение можно отметить))