Центрирование с Sass

Центрирование в CSS хорошо известно как утомительное занятие. Это своего рода кляп из языка, приводящий к таким шуткам, как «нам удалось отправить людей на Луну, но мы не можем выровнять по вертикали в CSS».

Хотя CSS действительно немного сложен при работе с центрированием, особенно с вертикальным, я чувствую, что эти шутки немного несправедливы. На самом деле, существует множество способов центрировать контент в CSS, вы просто должны знать, как это сделать.

Эта статья не предназначена для объяснения того, как работают эти методы, но как мы можем обернуть их в миксин Sass для удобного и простого использования. Так что, если вы чувствуете себя немного неловко из-за центрирования CSS, могу я порекомендовать вам прочитать несколько ресурсов:

• Как сосредоточиться в CSS
• Центрирование в CSS: полное руководство

Все хорошо? Давайте начнем тогда.

О чем это все?

Во-первых, мы сосредоточимся на центрировании элемента в его родительском элементе, так как это наиболее распространенный вариант использования абсолютного центрирования (модалы, содержимое в разделе и т. Д.). Когда вы спрашиваете кого-то о CSS-центрировании, обычный ответ, который вы получаете в ответ: вы знаете размеры элемента? Причина этого вопроса в том, что если вы их не знаете, лучшее решение — это использовать CSS-преобразования. Он немного снижает поддержку браузера, но он очень гибкий. Если вы не можете использовать CSS-преобразования или знаете ширину и высоту элемента, тогда легко полагаться на отрицательные поля.

Таким образом, наш миксин собирается сделать это в основном: расположить верхний левый угол элемента абсолютно посередине контейнера, а затем сместить, если половина его ширины и половина его высоты либо с CSS-преобразованиями, либо с отрицательными полями, в зависимости от того, стоит ли Размеры передаются в миксин. Без измерений: идите за трансформациями; Размеры: используйте поля.

Вы бы тогда использовали это так:

/** * Enable position context for the child */ .parent { position: relative; } /** * Absolutely center the element in its parent * No dimensions are passed to the mixin, so it relies on CSS transforms */ .child-with-unknown-dimensions { @include center; } /** * Absolutely center the element in its parent * Width is passed to the mixin, so we rely on a negative margin for the * horizontal axis and CSS transforms for the vertical axis */ .child-with-known-width { @include center(400px); } /** * Absolutely center the element in its parent * Height is passed to the mixin, so we rely on a negative margin for the * vertical axis and CSS transforms for the horizontal axis */ .child-with-known-height { @include center($height: 400px); } /** * Absolutely center the element in its parent * Width is passed to the mixin, so we rely on a negative margins for both * horizontal axis and vertical axis */ .child-with-known-dimensions { @include center(400px, 400px); } 

После компиляции он должен вывести это:

 §.parent { position: relative; } .child-with-unknown-dimensions { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .child-with-known-width { position: absolute; top: 50%; left: 50%; margin-left: -200px; width: 400px; transform: translateY(-50%); } .child-with-known-height { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); margin-top: -200px; height: 400px; } .child-with-known-dimensions { position: absolute; top: 50%; left: 50%; margin-left: -200px; width: 400px; margin-top: -200px; height: 400px; } 

Хорошо, это выглядит немного многословно, но имейте в виду, что этот вывод для демонстрационных целей. Маловероятно, что вы используете их все в данной ситуации.

Строим миксин

Хорошо, давайте копать. Из предыдущих фрагментов кода мы уже знаем сигнатуру нашего миксина: она имеет два необязательных параметра: $width и $height .

 @mixin center($width: null, $height: null) { position: absolute; top: 50%; left: 50%; // Moar magic here... } 

 @mixin center($width: null, $height: null) { position: absolute; top: 50%; left: 50%; @if not $width and not $height { // Go with `translate` } @else if $width and $height { // Go width `margin` } @else if not $height { // Go with `margin-left` and `translateY` } @else { // Go with `margin-top` and `translateX` } } 

 @mixin center($width: null, $height: null) { position: absolute; top: 50%; left: 50%; @if not $width and not $height { transform: translate(-50%, -50%); } @else if $width and $height { width: $width; height: $height; margin: -($width / 2) #{0 0} -($height / 2); } @else if not $height { width: $width; margin-left: -($width / 2); transform: translateY(-50%); } @else { height: $height; margin-top: -($height / 2); transform: translateX(-50%); } } 

 @mixin center-children { display: flex; justify-content: center; align-items: center; } 

 .parent { @include center-children; } 

 .parent { display: flex; justify-content: center; align-items: center; }