Как отцентрировать элемент?

Question

[Guest3302]

Без помощи родительского блока, абсолютного позиционирования и смещений?

По горизонтали понятно, боковые отступы. Но что касается вертикали, есть аналогичные способы?

Comments

[Rustam Bainazarov]

Нужен конкретный пример или скриншот того, что нужно получить в итоге. Чем не устраивает тот же flex для родителя?

[Ankhena]

Вы удивитесь CSS центрирование

[Guest3302]

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

[Guest3302]

Рустам Байназаров, ничего сверхъестественного: просто отцентрировать элемент внутри родителя. Чтобы вне зависимости от его размеров (80/80% или 25/25%), он всегда находился в центре - и по горизонтали, и по вертикали.

По горизонтали понятно, там боковые отступы, но как центровать по вертикали, непонятно.

Чем не устраивает тот же flex для родителя?

Устраивает, я задал вопрос чисто из любопытства.

[Ankhena]

Guest3302, ели вы ничего не будете делать с родителем, то его высота будет равна высоте дочернего. И выравнивать нечего. Если же с родителем уже проведены какие-то манипуляции (задана высота, флекс и т.д.), то почему бы не продолжить.

[Guest3302]

Ankhena, я согласен, что рабочим будет любой из этих способов, в том числе флексы. Я спросил из любопытства, есть ли вертикальная альтернатива margin: auto или иной, но подобный способ вертикальной "центровки".

[Ankhena]

Guest3302, нет, без манипуляций с родителем, если это не изначально таблица, так не получится.

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

Да.

Answer 1

[Nekdev]

margin-top: 50vh;
transform: translateY(-50%);

А зачем?)

Comments

[Guest3302]

Покажите рабочий пример с этим решением.

[Nekdev]

Guest3302, https://jsfiddle.net/Nekoguard/6zk23b91/3/

[Nekdev]

Guest3302, ну с vh рабоатет, когда нужно по середине видимой части экрана именно отцентровать, если у вас этот блок внутри другого блока находится, который больше чем высота экрана, но естественно, лучше центровать через родительский блок флексами например)