Верстка. Позиционирование через absolute

Здравствуйте. Опять какая-то каша в голове, решил переключиться с фреймворков на hand-coding. Решил сверстать макет. Блок нужно спозиционировать посередине вертикально и горизонтально.

Ничего лучше, чем
position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	margin: 0 auto;


Я не нашел. В итоге, например, вижу такое в Chrome Dev Tools

Элемент занимает 100% ширины экрана и, например, желтая кнопка без своих стилей width: 10%;
занимает всю ширину экрана. Пришлось дописать костыль, чтобы она не занимала всю ширину экрана.

Codepen

Хотя, на многих сайтах тоже вижу абсолютно позиционированные элементы.
Но всё равно, просто интересно, может, есть какой-нибудь другой способ? Конкретно напрягает размер этих элементов в Dev Tools. Насколько правильно в данном случае позиционировать элементы так?
  • Вопрос задан
  • 2545 просмотров
Пригласить эксперта
Ответы на вопрос 2
GruZZ
@GruZZ
HTML-верстальщик
Абсолютно спозиционировать блок по центру экрана у вас получится, только если знать размеры этого блока.
Возможный вариант (с использованием display:table;) решения задачи: codepen.io/GruZZ/pen/Bwakn?editors=110
Еще можно почитать про Flexbox, но тут уже всё зависит от требований к кроссбраузерности.
Ответ написан
Комментировать
просто центрировать элемент??
если вы не знаете размеры блока, например:
html
<div class='center-block'></div>
css
.center-block{
  position: absolute;
  left: 50%;
  top: 50%;
}

js
$(document).ready(function() {
  $('.center-block').css({
        'margin-left':  -$(this).width() + 'px',
        'margin-top': -$(this).height() + 'px'
  });
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы