Сколько способов существует для выравнивания блока по центру?

Question

[krlljs]

Знаю лишь один:

.block
{
margin: 0 auto;
width: 80%;
}

В таком случаи блок выровниться по центру горизонтально. В этом случаи нужно знать ширену. А без указания ширины как нибудь выравнить можно?

Еще знаю что если нужно выровнить текст, то добавляем text-align: centre. Вот блок текст в этом случаи может быть все 100% в ширену, то есть не нужно указывать, он без этого отцентруется. Ну если по вертикали нужно выправить, тут могу пребегнуть к обертке с абсолютным позиционированием и родителем с относительным. А есть какие нибудь еще способы отцентровать что либо по центру?

P.S. занялся всерьез этим вопросом, хочу собрать все способы в едином месте (то есть тут)

Answer 1

[Александр Таратин]

habrahabr.ru/post/189696

Comments

[Дмитрий Шинкарь]

мне всегда нравятся ответы со ссылками на хабр - они самые исчерпывающие :D

Answer 2

[Viktor Vsk]

https://css-tricks.com/centering-css-complete-guide/

Answer 3

[xbor]

Ещё один способ который я не нашел среди описанных выше, это:

.contain {
    display: inline-block;
    vertical-align: top;
}
.contain:first-of-type {
    margin-left: calc((100% - 1200px) / 2);
}
.contain + .contain {
    margin-left: 30px;
}
:not(aside).contain {
    width: 900px;
}
aside.contain {
    width: 270px;
}

и

<aside class="contain"><aside/>
    <div class="contain"><div/>