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

Question

[goodknight]

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

Ничего лучше, чем

position: absolute;
	top: 35%;
	left: 0;
	right: 0;
	margin: 0 auto;

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

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

Codepen

Хотя, на многих сайтах тоже вижу абсолютно позиционированные элементы.
Но всё равно, просто интересно, может, есть какой-нибудь другой способ? Конкретно напрягает размер этих элементов в Dev Tools. Насколько правильно в данном случае позиционировать элементы так?

Answer 1

[Николай Садовников]

Абсолютно спозиционировать блок по центру экрана у вас получится, только если знать размеры этого блока.
Возможный вариант (с использованием display:table;) решения задачи: codepen.io/GruZZ/pen/Bwakn?editors=110
Еще можно почитать про Flexbox, но тут уже всё зависит от требований к кроссбраузерности.

Answer 2

[Ольга Стогова]

просто центрировать элемент??
если вы не знаете размеры блока, например:
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'
  });
});