Как центровать без смешение position: absolute;?

Question

[Muslim Mamaev]

Здравствуйте! Я хотел сверху картинки поставить кнопку в центр,с пк норм. а с телефона кнопка смешается право. На пк тоже если уменьшить окно.

<div class="img_position">
    <img src="/style/img/logo.png" width="100%">
	<a href="/start/"><img class="start" src="/img/start_game.png"></a>
    </div>

.img_position{
	position:relative;
	margin:0;
	padding:0;
}

.start{
    position:absolute;
	left:100px;
	bottom:-10px;
}

Comments

[Ankhena]

Так https://jsfiddle.net/5hrybcf0/

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

Answer 1

[oink]

.start{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Рекомендую запомнить метод, если продолжите заниматься версткой, этим трюком придется пользоваться тысячи раз.

UPD. Только не к .start это надо применить, а к ссылке-родителю. Не заметил, что два img тут участвует.

Comments

[Ankhena]

Рекомендую запомнить метод, если продолжите заниматься версткой, этим трюком придется пользоваться тысячи раз.

Можно забить на этот метод и перестать использовать абсолюты, где не нужно.
Уже некоторое время есть гриды.

[Muslim Mamaev]

Ankhena, а грид позволяет налаживать блоки на блок как position:absolute; ? если да,покажите мне пример

[Ankhena]

Muslim Mamaev, полчаса назад код в комментариях написала...

[oink]

Ankhena, кого-то по-прежнему заставляют делать поддержку для IE11, а то и для более ранних версий, так что этот способ еще поживет.

[Ankhena]

oink, этого уже очень мало, но зато можно встретить в существующих проектах. Так что, да, знать и понимать нужно, конечно.