{"draftJsState":{"blocks":[{"data":{"image":{"id":"6737be1c6b0e135072a1a434"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"4lf3f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":135,"style":"BOLD"}],"text":"Приветствуем Вас, дорогие читатели! Сегодня мы погрузимся в одну из самых загадочных и непостижимых тайн веб-разработки — выравнивание div по центру. В 2024 году эта задача всё ещё вызывает у многих разработчиков приступы паники и желания сменить профессию. Но не беспокойтесь, у нас есть целых 5 способов, как это сделать! Итак, приступим.","type":"unstyled","key":"eftj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"Способ 1: Flexbox — ваш новый лучший друг","type":"header-two","key":"aqmjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"С 2013 года Flexbox спасает разработчиков от мучений с выравниванием. Если вы до сих пор не освоили его, пора это сделать.","type":"unstyled","key":"akbtv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"muti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: flex;","type":"blockquote","key":"f2g27"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" justify-content: center;","type":"blockquote","key":"1vgcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" align-items: center;","type":"blockquote","key":"6hnkj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"b3u8n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"3566p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"eo7fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"4edjb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"2ec87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"3sjag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"crght"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"6mds1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"84tid"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fi1gi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"a2ioq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"am7gf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":50,"offset":0,"style":"BOLD"}],"text":"Способ 2: CSS Grid — новейший способ быть в тренде","type":"header-two","key":"51b5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если Flexbox — это ваш лучший друг, то CSS Grid — это друг, который всегда в тренде и знает все новинки. С ним вы тоже легко справитесь.","type":"unstyled","key":"78gsm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"5mpuh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: grid;","type":"blockquote","key":"dtci6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" place-items: center;","type":"blockquote","key":"1g57j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"9c9ii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"4f6r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"aasic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"et5q2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"2o3e4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"8iilg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"cnqvu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"ei3cl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"10l10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"48pkq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"7n9av"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"3eqpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Способ 3: Проверенный временем margin: auto","type":"header-two","key":"8pr3s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Классика не стареет. Если вы всё ещё не освоили Flexbox и Grid, этот способ для вас.","type":"unstyled","key":"64m7r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"26ohm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"2fq4i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"9uvpt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"autfg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"2l0sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"4onff"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"euvml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"70enf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" margin: auto;","type":"blockquote","key":"2ludd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" position: relative;","type":"blockquote","key":"e2jbf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" top: 50%;","type":"blockquote","key":"5f91d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" transform: translateY(-50%);","type":"blockquote","key":"35mut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"eca6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"beprt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8o5ro"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"6opgq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"et8ne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":67,"offset":0,"style":"BOLD"}],"text":"Способ 4: Абсолютное позиционирование — для тех, кто любит точность","type":"header-two","key":"e5mun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы перфекционист и хотите полный контроль, абсолютное позиционирование — ваш выбор.","type":"unstyled","key":"3dunv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"drsdm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" position: relative;","type":"blockquote","key":"apqie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"8phbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"9o199"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"91tcd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"965ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"caou1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"25rns"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"93d04"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"27e8j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" position: absolute;","type":"blockquote","key":"e95d4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" top: 50%;","type":"blockquote","key":"8ig1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" left: 50%;","type":"blockquote","key":"5qlsk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" transform: translate(-50%, -50%);","type":"blockquote","key":"dtqat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"agvfk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6s8ci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8n7v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8urmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"fpedn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":43,"offset":0,"style":"BOLD"}],"text":"Способ 5: Таблицы (да-да, вы не ослышались)","type":"header-two","key":"el7l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":88,"style":"BOLD"}],"text":"Если вам не чужды методы прошлого века, вы можете использовать таблицы, чтобы выровнять div. Это не шутка, этот метод до сих пор работает!","type":"unstyled","key":"e4ve4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"ciue5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: table;","type":"blockquote","key":"444l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100%;","type":"blockquote","key":"1e27s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"3998e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"f1n6l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"594nj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".cell {","type":"blockquote","key":"18ifr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: table-cell;","type":"blockquote","key":"2iio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" vertical-align: middle;","type":"blockquote","key":"cdcq5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"f9rpg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"30mes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"9o146"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"2q4gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"7upun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"1ak14"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: inline-block;","type":"blockquote","key":"6k62i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"4qv6a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"e3hkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"664fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"f10ef"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"9dgvi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4eorg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"8vl4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":75,"offset":0,"style":"BOLD"}],"text":"Способ 6: align-content и text-align — когда нужно совместить несовместимое","type":"header-two","key":"6th5n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот способ — для тех, кто хочет показать своё мастерство в сочетании различных техник. Немного магии Flexbox и немного магии текстового выравнивания.","type":"unstyled","key":"1rs9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".container {","type":"blockquote","key":"6ekob"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: flex;","type":"blockquote","key":"e5s84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" flex-wrap: wrap;","type":"blockquote","key":"dfjfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" align-content: center;","type":"blockquote","key":"4k9ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" text-align: center;","type":"blockquote","key":"2prrp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100vh;","type":"blockquote","key":"68sje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" border: 2px dashed #ccc;","type":"blockquote","key":"a082j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"bq57q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".box {","type":"blockquote","key":"4ck8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" display: inline-block;","type":"blockquote","key":"6nker"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" width: 100px;","type":"blockquote","key":"6r1s6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" height: 100px;","type":"blockquote","key":"8ckat"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" background-color: #f00;","type":"blockquote","key":"6hhq7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"btttq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"am0vv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"4nq1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"2b5g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"dpc3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"Заключение","type":"header-two","key":"4t929"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":76,"style":"BOLD"}],"text":"Вот и всё, друзья! Теперь вы вооружены целыми шестью способами выравнивания div по центру.","type":"unstyled","key":"829j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":25,"style":"BOLD"},{"length":3,"offset":110,"style":"BOLD"}],"text":"В 2024 году выравнивание div не должно быть проблемой. Так что берите на вооружение наши методы, и пусть ваши div всегда будут ровны по центру!","type":"unstyled","key":"bmqch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Удачи в ваших веб-разработках, и помните: если что-то не получается — всегда можно спросить у Google или, на худой конец, у коллеги.","type":"unstyled","key":"etvlq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"До новых встреч в наших статьях, где мы будем разбирать ещё более сложные и таинственные задачи веб-разработки!","type":"unstyled","key":"30f7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":60,"offset":0,"style":"BOLD"}],"text":"Благодарим за ваше внимание, ставьте лайки и подписывайтесь!","type":"unstyled","key":"bj10c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"K5z90aksKF7lNxctfJw8"}],"entityMap":{}},"mentions":[]}