7 ways to vertically and to horizontally center with CSS
HTML-код
- Опубликовано: 21 сен 2024
- 1) codepen.io/ann...
2) codepen.io/ann...
3) codepen.io/ann...
4) codepen.io/ann...
5) codepen.io/ann...
6) codepen.io/ann...
7) codepen.io/ann...
__
Frontend Book - tpverstak.ru/f...
Ask a Front-end Developer for free - frontendhelp.m...
__
Web - tpverstak.ru
VK - tpverstak
Instagram - / tpverstak
Telegram - t.me/tpverstak
Telegram Chat - t.me/tpverstak...
__
Courses and Marathons - tpverstak.ru/co...
Feedback - topic-1...
Умничка!!🌹🌹 Первый раз кто-то без понтов быстро всё объяснил 👍
Так классно что вы даёте ссылки на примеры в codepen! Это так удобно! Уже только поэтому мне ооочень нравиться ваш канал. Послушал, и тут же можно поиграть с кодом из видео. Спасибо
Спасибо :)
Да, помню эту тему. На собесах, кстати, довольно часто спрашивали. А теперь... А теперь 98% выравнивают с помощью flexbox и не парятся)
Замечательно, что Flexbox появился в нашей жизни)
@@annblok_webdev не слишком, у нас тимлид, который всё делает на флексах, постоянно с ними долбался, то это не так, то то неправильно, флексы пипец как тупо сделали, говорят грид сырой, ну так с гридом всё просто, а с флексами я ещё не видел, чтобы кто-то с ними не *бался, будто их на коленке в электричке писали. флексы конечно принесли много хорошего, но сделаны они через одно место.
@@eugenenovikov671 Нормально флексы сделаны, все время ими пользуюсь и ни разу проблем небыло. Это ваш тимлид чето неправильно видимо мудрил.
И правильно, зачем извращаться если все в три строчки кода делается.
До сих пор спрашивают..)
Век живи век учись! Урок конечно классный получился! Спасибо!
Молодец, вы очень красивая и умная девушка! Спасибо большое! Я начинающий верстальщик и вы мне очень сильно помогаете!!!❤🤓😍👍
И как ваши успехи?) спустя год))
Красота, интелект, красноречивость и все в одном блогере... :) Подписываюсь срочно!
Спасибо за полезное видео!
Ты что-то интеллектом не выделяешься(
она просто рассказывает про элементарщину из своей работы, ты это проявлением интеллекта называешь? :D
Спасибо огромное.Не могла выравнить фото по центру несколько часов , но благодаря вашему видео это получилось.Здоровья вам и вашим близким
Спасибо 😊😊😊
Спасибо, за помощь молодым разработчикам. И ещё вы красивая.
Я начинаю обучатся Front-End, ваши уроки очень полезны для меня. Спасибо большое!
❤️
Опять качественный контент подъехал. Сразу лайк. И глаза как всегда просто неземные. Красивый цвет.
Анна огромное вам спасибо, пол дня потратил. пока не не увидел ваше видео.
Спасибо большое, впервый раз вижу программиста женского пола)
Вы красавчик !
Очень хорошо объясняете, ничего лишнего, все по делу.
Спасибо. Про calc не знал... А вообще, только вчера пытался слайдер центрировать в бутстрапе и без css.
Отлично! Не знал про calc. Спасибо большое!
Лучшее видео по центрированию во всем ютубе!!! Ха ха, спасибо! Мне помогло)
Спасибо :)
Это то, что мне было нужно , спасибо !!!
Очень классно объясняете и понятно, Спасибо. Красивый, приятный голос.
Очень полезное видео, спасибо
Анна Блок!
Привет Анна. Хорошая подача инфы: просто, понятно, без воды 👍. Я как то недавно вспоминал твои слова, по поводу: книги по CSS(и не только), что их лучше читать в оригинале. Теперь прочитав некоторые из них, я понимаю твои слова 🙂. Иной раз могут сбить с толку читателя, но благо то, что иногда помогает логика, хотя, ошибок довольно не мало в книгах. Больше всего приводит в недоумение - когда задание выполняемые в книгах на русском, а материал на который ссылается эта же книга, на английским. В общем наши издательства, сделали работу на от.....сь😕, хотя книги хорошие.
Привет, всё верно. Издательства не сильно парятся, потому что "и так сойдет"((
Спасибо за доступную подачу инфы, емко и информативно
аолаоаао Спасибо 2 дня искал как же центровать блок навигации ! Короче лайк !
Спасибо огромное!!! Продолжай очень полезные видео)
Мне нравится этот канал четко,ясно,кратко.
Спасибо за ваш труд!
Спасибо! Просто, быстро и без воды. Отличное видео!
приятно слушать
Все это костыли, в каком-то смысле. Технологии более 20 лет, а чтобы блок по центру поставить все еще нужно какие-то хаки юзать. И не говорите мне, что это не так, камни с огорода будете камазами вывозить. Flex -да, согласен, но остальное - костылябры костылянские.
а грид?
Это не костыли, это CSS. Как по мне, это один большой костыль.
костыли это то, что нужно флексам прописывать, чтобы как-то заработало. у грида таких 6-этажных флексокостылей нет, да и до флексов всё работало всегда.
@@eugenenovikov671 у флэксов нет костылей
Ну просто рассматриваются несколько возможных способов)) Flex сейчас всеми браузерами поддерживается, даже мобильными, поэтому костыли и не нужны.
Хороший урок.Спасибо)Теперь есть выбор для разнообразия,а то до этого центрировал то flex-ами,то случайно получалось.Так 7 лэндингов сверстал,не вникая особо
Красатуня.Супер👍😘
Помню до calc делал с отрицательным margin-top равным половине высоты блока :)
До сих пор так делаю)
Это самый популярный метод вообще-то, с отрицаловкой половины
Очень нужная шпаргалка, спасибо!)
Полезный ролик, спасибо, Аня
Спасибо!
Кажется так будет лучше, чем left 0; right 0; margin 0 auto;
position: absolute:
left: 50%; top: 50%;
transform: translate(-50%, -50%);
или position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
Большое спасибо!!
Спс я начинаюший програмист спосибо🤟
первый метод сработал на отлично) спасибо
Самый старый метод отценровки - это тег правда только по горизонтали центрирует. Сейчас пользуюсь margin: 0 auto; опять же если только горизонтальное центрирование нужно.
Такой метод только если при email верстке осталось использовать)) Хотя атрибут style там тоже читается
Спасибо, очень помогли!
Фамилия соответствует модели CSS)))
Спасибки супер а я возился
Лет 20 назад это было почти невозможно сделать при помощи CSS. Приходилось писать JavaScript для правильной отцентровки объектов :)
Через таблицу (настоящую, display:table ещё не было) или через line-height (для одной строчки текста) можно было и 20 лет назад. Но да, IE6 тогда только вышел, а Firefox только родился и был ещё убог (inline-block появились только в третьей версии).
Spasibo 🤗
Спасибо, ролик в коллекцию!
Спасибо!
Спасибо за полезное видео
3) codepen.io/lapeko/pen/VwYQwOZ (через display: table-cell) - что потом обноружил в примере 7 )
5) codepen.io/lapeko/pen/WNbMbwX (чуть короче), codepen.io/lapeko/pen/MWYQYjq (без absolute, +1 селектор, -2 css правила)
6) codepen.io/lapeko/pen/rNaJaYb ( сам является блочным элементом, зачем его дополнительно оборачивать, если в нем только одна строка)
Есть еще стайл-гайды, например по порядку определения css-свойств (по алфавиту / смыслу) в правиле. Еще не узнав о них стал сортировать по значимости: display и position я всегда определяю вверху правила. Благодоря этому становится быстро понятно как будет себя вести элемент.
Спасибо за информацию
Спасибо большое !!!!😍😍
Спасибо, всё стало понятно
Классно большой спасибо мне нужна было это спасибо
Хм, у айти бороды только было интервью с фронтендером, где приводился пример вопросов с собеседования как выровнять блок по центру не зная ширины и высоты. Вы прям в тему) Или это мафия верстальщиков?
Типичный Верстальщик спешит на помощь
Ураа, видео от Ани, верстка только с ней =)
потеребил? молодец
Лайк!Спасибо!Всегда качественный материал!На заметку взял)Какие ДЦПшники поставили дизлайк??
как всегда супер!!!
Супер, я с вами! Спасибо!
Блок выравнивает блок
Мега-спасибо!!!!!!!!!!!!!!!!
да мне интересно
Не хватает примера с отрицательным margin-top на случай, если функция calc не поддерживается браузером
Спасибо
я люблю тебя
Я давно говорил Блоку, что ему пора на большой экран
С большой силой приходит большая ответственность
я давно говори Флоату что ему пора на центр
Круто круто лайк.
Можно выравнивать по центру и вот так (а родительский элемент должен быть position: relative):
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
.block {
position:absolute;
left:50%;
top:50%;
transform: translate (-50%,-50%);
}
Большое спасибо за видео. Столкнулся я с тем что задали мне задание: сделать нижнее подчёркивоние заголовка с помощью псевдо элемента, вроде не сложно, да только полоска никак по центру не встаёт.. пересмотрел все видосы посвящённые псевдо-элементам но там об этом ничего не говорится.. Уже з@ебался совсем, думаю дай посмотрю ваше видео о том как поставить квадрат, и решил применить те-же значения, и вуаля... свкршилось чудо! Спасибо вам за ваш труд!
Всё-таки лучше не использовать absolute без надобности (например попап). Грид и Флекс в помощь!
Интересно а можно расположить текст вокруг картинки. По кругу чтоб он облепил его со всех сторон?. В то время как картинка находится в центре страницы
Если известна высота и ширина блока и размеры родителя, можно через падинги выровнить, используя calc
А зачем ::before на img для выравнивания? Не проще только блок с img сделать inline-block и выравнивать как строчный элемент? Поддержка display самая "древняя" (если не ошибаюсь) Это свойство с некоторыми ограничениями ещё IE6 понимал :)
С сеткой bootstrap 3 - это практически невозможно )
Здравствуйте, а обязательно ставить margin: "0" auto? или можно просто поставить margin: auto?
Не пойму, почему в 1-м и 2-м примерах свойство absolute работает без указания relative для body (родительского элемента)?
Тогда идет отсчет от края окна браузера.
Потому что оно работает относительно хтмл, а боди растянут на всю ширину этого хтмл
Самый простой способ отцентровать блок с помощью абсолютного позоционирования, это задать ему такие свойства: top:0; bottom:0; left:0; right:0; И не нужно возиться с марджинами и трансформациями.
Сам-то пробовал так делать? "И не нужно возиться с марджинами " - как раз без margin:auto этот способ не работает )
@@ДмитрийАкимов-т3б давно уже не использовал этот способ, наверное забыл этот нюанс ))
Но все равно, это лучше чем применять всякие трансформации ))
@@dmitriymovchan6563 нет не лучше, с такими параметрами ты растягиваешь блок на весь размер родителя, это не всегда нужно
@@denysgoloborodko3855 ничего он не растягивает, там же значение 0, это значит что с этих сторон ничего и не происходит
кстати, а почему забываем про margin-right: -50% для возврата элементу всей доступной ширины, которую мы забрали, когда использовали left: 50%?
Анна блок снимает видео про блок. Извиняюсь за каламбур.
Проссто душка!!!
годно.
п.с. а такие линзы не мешают обзору?
В середине экрана всегда должно быть фото Анны!! Остальное - только CSS Grid!
если я все правильно помню, в position absolute нельзя писать left и right так как это противоположные значения htmlbook.ru/css/position
с универсальным мне пришлось поставить .parent::before{
content:'';
display: block;
vertical-align:middle;
height: 30%;
мне кажется, вы немецкий учили в школе, а английский года 2 назад начали) странный говор)
Когда ты говорили про последний метод с таблицами, то сказала «последний пятый метод»
Жду очередной розыгрыш книг по JS. Когда будет видео? 😊
Постараюсь на неделе выпустить. Грокаем алгоритмы, скорее всего, разыграем.
а если на позиционировании в первом примере не писать лефт 0, райт ноль и барджин 0 авто, а вместо этого по аналогии с вертикальным позиционированием написать left: 50%; transform: translateX(-50%); по идее тоже должно сработать? Надо попробовать в кодпене.
А как вставить видео в блок div , если хочу сделать видео шапкой сайта ,?
Про выравнивание Блок А. по центру экрана на CSS по горизонтали и вертикали
уже шутили? ((:
слуууушай спросить хотел))) как прижать блок к правому краю обёртки?
Ох уж эти любители абсолюта)))) сколько раз матюкался переделывая верстку или дописывая кучу медиазапросов, чтобы в мобильной версии ничего не ехало и не ползло.
няшка :З
А для нормализации недостаточно просто для body прописать по звездочке margin:0 и padding:0? А то не поленился, загрузил тот файл normalize, а там столько... Как вообще грамотно сбросить стили для обычного сайта? Спасибо.
Через звёздочку очень плохо делать сбросы
@@annblok_webdev а как грамотно делать сбросы? Вот делаю новый сайт, что мне сделать для сброса? Очень жду ответа :) не для примера сброс, а для полноценного сайта... Спасибо!
@@annblok_webdev кстати, идея для видео очередного :) я думаю, это многим актуально.
а как это все сделать без position:absolute? на мониторе с другим разрешением экрана выглядит просто ужасно
О, DOOM!
:D
Как сделать такой же редактор кода сразу с выводом?
А зачем во втором примере (codepen.io/anna_blok/pen/oKvYdW) делать так:
.box {
width: 200px;
height: 300px;
background-color: #ff0;
position: absolute;
left:0;
right:0;
margin: 0 auto;
top:calc(50% - 150px);
}
если можно упростить и написать:
.box {
width: 200px;
height: 300px;
background-color: #ff0;
position: absolute;
top:calc(50% - 150px);
left:calc(50% -100px);
}
Есть ли какие-то преимущества в использовании left:0, right:0, margin: 0 auto в сравнении с моим вариантом?
Что вообще даёт margin: 0 auto; ?
Спасибо!
Еще видос снимешь)))
а как выровнять список?
почему в дизайне страниц так распространено серое на сером?
можно пример?
@@annblok_webdev закрыл вкладку, в истории не нашел. там была серая кнопка с серым текстом.
И вообще бледный серый текст(на белом фоне) повсеместно. Как будто испытывают нас на качество нашего зрения.. У меня хорошее зрение, но серое и бледно-серое бесит.
Немного схолтурила. Не рассказала во флексе и гриде как небольшой прямоугольник отцентрировать, а не полностью на весь экран отцентрировать блок.
МОЖНО ВМЕСТО translate(0, -50%); НАПИСАТЬ ПРОСТО translateY(-50%);
А ТАК СПАСИБО