В този урок ще ви покажа как да центрирате един HTML елемент не само по хоризонтала, но и по вертикала. Ако тръгнете да се ровите из нета ще намерите много решения, които имат редица плюсове и минуси, но тук ще стане въпрос за най-лесния и бърз начин да го сторите.
На повечето от вас е ясно, че за да центрираме един елемент по хоризонтала (било то div, span, a, ul и пр.) е необходимо да му задаем ширина и margin: 0 auto. В някои по-специални ситуации, наложени от по-специални браузъри, трябва да добавим text-align: center и така нещата се получават, но в 99% от случаите ви е необходимо само margin: 0 auto. По-интересното е как да центрирате елемента по вертикалата, така че да стои винаги в средата на браузъра (или родителския елемент, ако пожелаете). Основният проблем идва от различните резолюции, на които се гледа сайтът. Точно за това ни трябва нещо универсално, което не е свързано с условности и изчисляване на безкрайни комбинации.
За примера днес ще направим нещо съвсем простичко, за да ви стане напълно ясно за какво говоря. Ще използваме един div, който ще центрираме спрямо екрана. Няма да пишем никакъв javascript. Изображения също не съм ползвал, тъй като, както казах се стремя да е максимално опростено.
Това доста често разваля визията, особено ако сте си играли да рисувате красиви input-и.
