{"id":66818,"date":"2024-05-09T18:15:10","date_gmt":"2024-05-09T11:15:10","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=66818"},"modified":"2024-05-09T18:15:10","modified_gmt":"2024-05-09T11:15:10","slug":"huong-dan-can-giua-css","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Vai_tro_can_giua_CSS_tren_trang_web_la_gi\" >Vai tr\u00f2 c\u0103n gi\u1eefa CSS tr\u00ean trang web l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Huong_dan_5_cach_can_giua_CSS_theo_chieu_ngang\" >H\u01b0\u1edbng d\u1eabn 5 c\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u ngang<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Huong_dan_3_cach_can_giua_CSS_theo_chieu_doc\" >H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u d\u1ecdc<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Huong_dan_4_cach_can_giua_CSS_theo_hai_chieu\" >H\u01b0\u1edbng d\u1eabn 4 c\u00e1ch c\u0103n gi\u1eefa CSS theo hai chi\u1ec1u<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Cau_hoi_thuong_gap_ve_can_giua_CSS\" >C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 c\u0103n gi\u1eefa CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#Tong_ket_ve_huong_dan_can_giua_CSS\" >T\u1ed5ng k\u1ebft v\u1ec1 h\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>C\u0103n gi\u1eefa b\u1ed1 c\u1ee5c trang web v\u1edbi CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm nh\u1eefng h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang ki\u1ebfn th\u1ee9c, \u0111\u1eebng b\u1ecf qua b\u00e0i vi\u1ebft n\u00e0y c\u1ee7a ITviec nh\u00e9.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Vai tr\u00f2 c\u0103n gi\u1eefa c\u1ee7a CSS tr\u00ean trang web<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u ngang<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u d\u1ecdc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u ngang v\u00e0 chi\u1ec1u d\u1ecdc<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Gi\u1ea3i \u0111\u00e1p c\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Vai_tro_can_giua_CSS_tren_trang_web_la_gi\"><\/span><strong>Vai tr\u00f2 c\u0103n gi\u1eefa CSS tr\u00ean trang web l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa trong CSS l\u00e0 quy tr\u00ecnh \u0111i\u1ec1u ch\u1ec9nh v\u1ecb tr\u00ed, \u0111\u01b0a c\u00e1c ph\u1ea7n t\u1eed tr\u00ean trang web v\u1ec1 ph\u00eda trung t\u00e2m so v\u1edbi ph\u1ea7n t\u1eed ch\u1ee9a ch\u00fang ho\u1eb7c gi\u1eefa m\u00e0n h\u00ecnh. K\u1ef9 thu\u1eadt n\u00e0y mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch quan tr\u1ecdng cho thi\u1ebft k\u1ebf website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">T\u1ea1o b\u1ed1 c\u1ee5c chuy\u00ean nghi\u1ec7p: C\u0103n gi\u1eefa gi\u00fap ph\u00e2n ph\u1ed1i kh\u00f4ng gian m\u1ed9t c\u00e1ch \u0111\u1ed3ng \u0111\u1ec1u, t\u1ea1o s\u1ef1 th\u1ed1ng nh\u1ea5t \u0111\u1eb7c bi\u1ec7t khi t\u00edch h\u1ee3p nhi\u1ec1u lo\u1ea1i n\u1ed9i dung kh\u00e1c nhau. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t h\u1eefu \u00edch khi mu\u1ed1n l\u00e0m n\u1ed5i b\u1eadt c\u00e1c y\u1ebfu t\u1ed1 quan tr\u1ecdng nh\u01b0 ti\u00eau \u0111\u1ec1, logo, h\u00ecnh \u1ea3nh,&#8230;<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u00e2ng cao tr\u1ea3i nghi\u1ec7m : B\u1ed1 c\u1ee5c c\u00e2n \u0111\u1ed1i v\u00e0 giao di\u1ec7n h\u1ea5p d\u1eabn gi\u00fap ng\u01b0\u1eddi s\u1eed d\u1ee5ng d\u1ec5 d\u00e0ng ti\u1ebfp c\u1eadn n\u1ed9i dung tr\u00ean trang web. N\u00f3 c\u0169ng gi\u00fap h\u1ecd t\u1eadp trung v\u00e0o th\u00f4ng tin quan tr\u1ecdng m\u00e0 b\u1ea1n mu\u1ed1n truy\u1ec1n t\u1ea3i.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">T\u0103ng kh\u1ea3 n\u0103ng ti\u1ebfp c\u1eadn: C\u0103n gi\u1eefa c\u0169ng l\u00e0m cho trang web d\u1ec5 d\u00e0ng \u0111\u00e1p \u1ee9ng v\u1edbi c\u00e1c thi\u1ebft b\u1ecb v\u00e0 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh kh\u00e1c nhau, t\u1eeb \u0111i\u1ec7n tho\u1ea1i th\u00f4ng minh \u0111\u1ebfn m\u00e1y t\u00ednh b\u00e0n v\u00e0 nhi\u1ec1u thi\u1ebft b\u1ecb kh\u00e1c. \u0110i\u1ec1u n\u00e0y t\u1ea1o ra s\u1ef1 linh ho\u1ea1t cho ng\u01b0\u1eddi d\u00f9ng khi truy c\u1eadp t\u1eeb b\u1ea5t k\u1ef3 thi\u1ebft b\u1ecb n\u00e0o.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_5_cach_can_giua_CSS_theo_chieu_ngang\"><\/span><strong>H\u01b0\u1edbng d\u1eabn 5 c\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u ngang<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00e1ch 1: S\u1eed d\u1ee5ng text-align: center<\/b><span style=\"font-weight: 400;\">;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u0103n gi\u1eefa n\u1ed9i dung c\u1ee7a m\u1ed9t ph\u1ea7n t\u1eed v\u0103n b\u1ea3n ho\u1eb7c ph\u1ea7n t\u1eed con b\u00ean trong m\u1ed9t ph\u1ea7n t\u1eed kh\u00e1c, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>text-align:center<\/strong>. Ph\u1ea1m vi \u00e1p d\u1ee5ng c\u1ee7a thu\u1ed9c t\u00ednh n\u00e0y g\u1ed3m:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Ph\u1ea7n t\u1eed block:<\/strong> <strong>text-align:center<\/strong> s\u1ebd c\u0103n gi\u1eefa t\u1ea5t c\u1ea3 c\u00e1c ph\u1ea7n t\u1eed v\u0103n b\u1ea3n v\u00e0 ph\u1ea7n t\u1eed con b\u00ean trong n\u00f3. Ch\u1eb3ng h\u1ea1n b\u1ea1n t\u1ea1o m\u1ed9t <strong>block &lt;div&gt;<\/strong> v\u00e0 c\u0103n gi\u1eefa b\u1eb1ng thu\u1ed9c t\u00ednh <strong>text-align:center<\/strong>, c\u00e1c \u0111o\u1ea1n v\u0103n b\u1ea3n, h\u00ecnh \u1ea3nh ho\u1eb7c b\u1ea5t k\u1ef3 ph\u1ea7n t\u1eed n\u00e0o b\u00ean trong ph\u1ea7n t\u1eed <strong>&lt;div&gt;<\/strong> \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>V\u0103n b\u1ea3n:<\/strong> \u0110\u1ed1i v\u1edbi ph\u1ea7n t\u1eed v\u0103n b\u1ea3n nh\u01b0<strong> &lt;p&gt;<\/strong> ho\u1eb7c<strong> &lt;h1&gt;<\/strong>, <strong>text-align:center<\/strong> s\u1ebd c\u0103n gi\u1eefa n\u1ed9i dung v\u0103n b\u1ea3n b\u00ean trong ph\u1ea7n t\u1eed \u0111\u00f3 theo tr\u1ee5c ngang.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Inline element (ph\u1ea7n t\u1eed n\u1ed9i dung):<\/strong> <strong>text-align: center<\/strong> kh\u00f4ng ho\u1ea1t \u0111\u1ed9ng tr\u1ef1c ti\u1ebfp tr\u00ean c\u00e1c ph\u1ea7n t\u1eed inline nh\u01b0 <strong>&lt;span&gt;<\/strong>. Tuy nhi\u00ean, n\u1ebfu b\u1ea1n \u0111\u1eb7t m\u1ed9t ph\u1ea7n t\u1eed inline trong m\u1ed9t ph\u1ea7n t\u1eed block r\u1ed3i \u00e1p d\u1ee5ng <strong>text-align: center<\/strong> cho ph\u1ea7n t\u1eed block \u0111\u00f3, th\u00ec n\u1ed9i dung inline s\u1ebd \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa theo tr\u1ee5c ngang.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Table v\u00e0 inline-block elements<\/strong>: C\u0169ng gi\u1ed1ng nh\u01b0 c\u00e1c ph\u1ea7n t\u1eed block, ph\u1ea7n t\u1eed table ho\u1eb7c ph\u1ea7n t\u1eed inline-block s\u1ebd \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa khi b\u1ea1n \u00e1p d\u1ee5ng <strong>text-align: center<\/strong>.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: left;\"><strong>HTML<\/strong><\/p>\n<\/td>\n<td style=\"text-align: left;\"><strong>CSS<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;p&gt;Hello, (centered) World!&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: arial;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 24px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 25px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 350px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0outline: dashed 1px black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">p {<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/* C\u0103n gi\u1eefa theo chi\u1ec1u ngang *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0text-align: center;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh cho \u0111o\u1ea1n code tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-68401 size-full\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro.png\" alt=\"c\u0103n gi\u1eefa css - itviec blog\" width=\"1558\" height=\"964\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro.png 1558w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro-300x186.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro-700x433.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro-200x124.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-1-vippro-100x62.png 100w\" sizes=\"auto, (max-width: 1558px) 100vw, 1558px\" \/><\/p>\n<h3><b>C\u00e1ch 2: S\u1eed d\u1ee5ng margin: 0 auto;<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Thu\u1ed9c t\u00ednh <strong>margin<\/strong> trong CSS \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng \u0111\u1ec3 x\u00e1c \u0111\u1ecbnh kho\u1ea3ng c\u00e1ch gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed ho\u1eb7c vi\u1ec1n c\u1ee7a ph\u1ea7n t\u1eed v\u1edbi ph\u1ea7n t\u1eed l\u00e2n c\u1eadn hay v\u1edbi bi\u00ean c\u1ee7a viewport (khung nh\u00ecn c\u1ee7a tr\u00ecnh duy\u1ec7t). Gi\u00e1 tr\u1ecb c\u1ee7a thu\u1ed9c t\u00ednh <strong>margin<\/strong> c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1eb7t theo nhi\u1ec1u c\u00e1ch. Trong \u0111\u00f3, \u0111\u1ec3 c\u0103n gi\u1eefa CSS b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>margin<\/strong> v\u1edbi gi\u00e1 tr\u1ecb <strong>left<\/strong> v\u00e0 <strong>right<\/strong> l\u00e0 <strong>auto<\/strong>.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Khi b\u1ea1n \u0111\u1eb7t <strong>margin-left<\/strong> v\u00e0 <strong>margin-right<\/strong> th\u00e0nh <strong>auto<\/strong> (margin-left: auto; margin-right: auto;) tr\u00ecnh duy\u1ec7t s\u1ebd t\u1ef1 \u0111\u1ed9ng t\u00ednh to\u00e1n kho\u1ea3ng c\u00e1ch c\u1ea7n thi\u1ebft \u0111\u1ec3 c\u0103n gi\u1eefa element trong container c\u1ee7a n\u00f3.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1ch n\u00e0y ch\u1ec9 ho\u1ea1t \u0111\u1ed9ng khi element c\u00f3 chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh. N\u1ebfu element c\u00f3 chi\u1ec1u r\u1ed9ng auto, n\u00f3 s\u1ebd t\u1ef1 \u0111\u1ed9ng chi\u1ebfm to\u00e0n b\u1ed9 chi\u1ec1u r\u1ed9ng c\u1ee7a container v\u00e0 kh\u00f4ng th\u1ec3 c\u0103n gi\u1eefa \u0111\u01b0\u1ee3c.<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-68404 size-full\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro.png\" alt=\"c\u0103n gi\u1eefa css - itviec blog\" width=\"1830\" height=\"286\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro.png 1830w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro-300x47.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro-1600x250.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro-200x31.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-2-vippro-100x16.png 100w\" sizes=\"auto, (max-width: 1830px) 100vw, 1830px\" \/><\/p>\n<p style=\"text-align: center;\">V\u00ed d\u1ee5 c\u0103n gi\u1eefa th\u00e0nh ph\u1ea7n box b\u1eb1ng c\u00e1ch \u0111\u1eb7t margin-left v\u00e0 margin-right th\u00e0nh auto.<\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 vi\u1ebft r\u00fat g\u1ecdn thu\u1ed9c t\u00ednh n\u00e0y th\u00e0nh <\/span><b>margin: 0 auto;<\/b><span style=\"font-weight: 400;\">. Trong \u0111\u00f3, 0 l\u00e0 gi\u00e1 tr\u1ecb <strong>top-bottom<\/strong> v\u00e0 <strong>auto<\/strong> l\u00e0 \u00e1p d\u1ee5ng cho <strong>left-right<\/strong>.<\/span><\/p>\n<h3><b>C\u00e1ch 3: S\u1eed d\u1ee5ng left: 50% v\u00e0 margin-left \u00e2m n\u1eeda chi\u1ec1u r\u1ed9ng<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Ph\u01b0\u01a1ng ph\u00e1p n\u00e0y ho\u1ea1t \u0111\u1ed9ng b\u1eb1ng c\u00e1ch \u0111\u1eb7t v\u1ecb tr\u00ed tr\u00e1i c\u1ee7a ph\u1ea7n t\u1eed th\u00e0nh 50% c\u1ee7a ph\u1ea7n t\u1eed cha v\u00e0 sau \u0111\u00f3 di chuy\u1ec3n n\u00f3 sang tr\u00e1i b\u1eb1ng m\u1ed9t n\u1eeda chi\u1ec1u r\u1ed9ng c\u1ee7a ch\u00ednh n\u00f3 (L\u01b0u \u00fd: ph\u1ea7n t\u1eed cha ph\u1ea3i c\u00f3 chi\u1ec1u r\u1ed9ng \u0111\u01b0\u1ee3c x\u00e1c \u0111\u1ecbnh tr\u01b0\u1edbc). \u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng ph\u00e1p truy\u1ec1n th\u1ed1ng v\u00e0 \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 r\u1ed9ng r\u00e3i tr\u00ean nhi\u1ec1u tr\u00ecnh duy\u1ec7t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>HTML<\/strong><\/td>\n<td><strong>CSS<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"can-giua\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0N\u1ed9i dung c\u1ee7a b\u1ea1n<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.can-giua {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 100px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0left: 50%;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0margin-left: -50px;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>C\u00e1ch 4: S\u1eed d\u1ee5ng transform: translateX(-50%);<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong CSS, \u0111\u1ec3 c\u0103n gi\u1eefa m\u1ed9t ph\u1ea7n t\u1eed theo chi\u1ec1u ngang khi ch\u01b0a bi\u1ebft tr\u01b0\u1edbc chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed cha, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <strong>transform: translateX(-50%)<\/strong> b\u1eb1ng c\u00e1c b\u01b0\u1edbc sau:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">X\u00e1c \u0111\u1ecbnh ph\u1ea7n t\u1eed b\u1ea1n mu\u1ed1n c\u0103n gi\u1eefa v\u00e0 \u0111\u1ea3m b\u1ea3o r\u1eb1ng n\u00f3 \u0111\u00e3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh d\u1ea1ng theo \u00fd mu\u1ed1n, v\u00ed d\u1ee5 nh\u01b0 \u0111\u00e3 thi\u1ebft l\u1eadp <strong>position: absolute<\/strong>; ho\u1eb7c <strong>position: fixed<\/strong>;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh <strong>left: 50%;<\/strong> \u0111\u1ec3 di chuy\u1ec3n ph\u1ea7n t\u1eed \u0111\u1ebfn v\u1ecb tr\u00ed ngang gi\u1eefa theo ph\u1ea7n tr\u0103m c\u1ee7a ph\u1ea7n t\u1eed cha g\u1ea7n nh\u1ea5t.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng <strong>transform: translateX(-50%);<\/strong> \u0111\u1ec3 di chuy\u1ec3n ph\u1ea7n t\u1eed ng\u01b0\u1ee3c l\u1ea1i 50% c\u1ee7a chi\u1ec1u r\u1ed9ng c\u1ee7a ch\u00ednh n\u00f3, \u0111i\u1ec1u n\u00e0y s\u1ebd c\u0103n gi\u1eefa ph\u1ea7n t\u1eed theo chi\u1ec1u ngang.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:\u00a0<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: left;\"><strong>HTML<\/strong><\/p>\n<\/td>\n<td style=\"text-align: left;\"><strong>CSS<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"parent\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"child\"&gt;&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td>\n<pre style=\"text-align: left;\"><span style=\"font-weight: 400;\">.parent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0position: relative;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0border: 1px solid green;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0display: inline-block;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0padding: 25px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0top: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0left: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0transform: translate(-50%, -50%);<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>K\u1ebft qu\u1ea3 hi\u1ec3n th\u1ecb h\u00ecnh \u1ea3nh cho \u0111o\u1ea1n code tr\u00ean:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-68406 size-full\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro.png\" alt=\"c\u0103n gi\u1eefa css - itviec blog\" width=\"1106\" height=\"1002\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro.png 1106w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro-300x272.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro-768x696.png 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro-200x181.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro-100x91.png 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/can-giua-css-vd-3-vippro-497x450.png 497w\" sizes=\"auto, (max-width: 1106px) 100vw, 1106px\" \/><\/p>\n<h3><b>C\u00e1ch 5: S\u1eed d\u1ee5ng Flexbox<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Flexbox l\u00e0 c\u00e1ch th\u1ee9c hi\u1ec7n \u0111\u1ea1i nh\u1ea5t \u0111\u1ec3 c\u0103n gi\u1eefa c\u00e1c element tr\u00ean trang web, gi\u00fap vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n \u0111\u00e1p \u1ee9ng (responsive layout) d\u1ec5 d\u00e0ng h\u01a1n nhi\u1ec1u so v\u1edbi tr\u01b0\u1edbc \u0111\u00e2y. Tuy nhi\u00ean, Flexbox ch\u01b0a \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 \u0111\u1ea7y \u0111\u1ee7 tr\u00ean m\u1ed9t s\u1ed1 tr\u00ecnh duy\u1ec7t c\u0169 nh\u01b0 Internet Explorer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u0103n gi\u1eefa m\u1ed9t element theo chi\u1ec1u ngang v\u1edbi Flexbox, ch\u1ec9 c\u1ea7n \u00e1p d\u1ee5ng <strong>display: flex<\/strong> v\u00e0 <strong>justify-content: center<\/strong> cho ph\u1ea7n t\u1eed cha.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: left;\"><strong>HTML<\/strong><\/p>\n<\/td>\n<td style=\"text-align: left;\"><strong>CSS<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"child\"&gt;&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: arial;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 24px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 25px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 350px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0outline: dashed 1px black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\/* C\u0103n gi\u1eefa ph\u1ea7n t\u1eed con *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0display: flex;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0justify-content: center;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 50px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 50px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0background-color: red;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_3_cach_can_giua_CSS_theo_chieu_doc\"><\/span><strong>H\u01b0\u1edbng d\u1eabn 3 c\u00e1ch c\u0103n gi\u1eefa CSS theo chi\u1ec1u d\u1ecdc<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00e1ch 1:\u00a0S\u1eed d\u1ee5ng top: 50% v\u00e0 margin-top \u00e2m n\u1eefa chi\u1ec1u cao<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Trong m\u1ed9t th\u1eddi gian d\u00e0i, \u0111\u00e2y l\u00e0 c\u00e1ch ph\u1ed5 bi\u1ebfn \u0111\u1ec3 c\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed theo chi\u1ec1u d\u1ecdc. \u0110\u1ec3 s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p n\u00e0y, b\u1ea1n c\u1ea7n bi\u1ebft chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed m\u00e0 b\u1ea1n mu\u1ed1n c\u0103n gi\u1eefa.<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc ti\u00ean, h\u00e3y \u0111\u1eb7t thu\u1ed9c t\u00ednh <strong>position<\/strong> c\u1ee7a ph\u1ea7n t\u1eed cha th\u00e0nh <strong>relative<\/strong>. <\/span><\/li>\n<li><span style=\"font-weight: 400;\">Sau \u0111\u00f3, \u0111\u1ed1i v\u1edbi ph\u1ea7n t\u1eed con, h\u00e3y \u0111\u1eb7t thu\u1ed9c t\u00ednh <strong>position<\/strong> th\u00e0nh <strong>absolute<\/strong> v\u00e0 <strong>top<\/strong> th\u00e0nh <strong>50%<\/strong>. Ti\u1ebfp theo s\u1eed d\u1ee5ng <strong>margin-top<\/strong> v\u1edbi gi\u00e1 tr\u1ecb \u00e2m b\u1eb1ng n\u1eeda chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed (V\u00ed d\u1ee5: N\u1ebfu ph\u1ea7n t\u1eed con c\u00f3 chi\u1ec1u cao l\u00e0 100px, th\u00ec b\u1ea1n s\u1ebd s\u1eed d\u1ee5ng <strong>margin-top: -50px;<\/strong>)<\/span><\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: left;\"><strong>HTML<\/strong><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><strong>CSS<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"child\"&gt;&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: arial;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 24px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 25px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 350px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0outline: dashed 1px black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/* Setup *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0position: relative;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 50px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 50px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: red;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/* C\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin-top: -50px;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>C\u00e1ch 2: S\u1eed d\u1ee5n<\/b><strong>g transform: translate(0, -50%); ho\u1eb7c transform: translateY(-50%) <\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n kh\u00f4ng bi\u1ebft chi\u1ec1u cao c\u1ee7a ph\u1ea7n t\u1eed b\u1ea1n mu\u1ed1n c\u0103n gi\u1eefa th\u00ec s\u1eed d\u1ee5ng transform &amp; translate ch\u00ednh l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt r\u1ea5t c\u00f3 \u00edch. V\u1edbi c\u00e1ch c\u0103n gi\u1eefa n\u00e0y, b\u1ea1n \u0111\u1eb7t thu\u1ed9c t\u00ednh v\u1ecb tr\u00ed c\u1ee7a ph\u1ea7n t\u1eed cha th\u00e0nh t\u01b0\u01a1ng \u0111\u1ed1i.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi ph\u1ea7n t\u1eed con, \u0111\u1eb7t thu\u1ed9c t\u00ednh <strong>position<\/strong> th\u00e0nh <strong>absolute<\/strong> v\u00e0 \u0111\u1eb7t <strong>top<\/strong> th\u00e0nh <strong>50%<\/strong>. B\u00e2y gi\u1edd, thay v\u00ec s\u1eed d\u1ee5ng margin \u00e2m \u0111\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed con, ch\u1ec9 c\u1ea7n s\u1eed d\u1ee5ng <strong>transform: translate(0, -50%);<\/strong><\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>HTML<\/strong><\/td>\n<td><strong>CSS<\/strong><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"child\"&gt;&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: arial;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 24px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 25px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 350px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0outline: dashed 1px black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\/* Setup *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0position: relative;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 50px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 50px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0background-color: red;<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\/* C\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0top: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0transform: translate(0, -50%);<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">L\u01b0u \u00fd r\u1eb1ng translate(0, -50%) l\u00e0 d\u1ea1ng vi\u1ebft t\u1eaft c\u1ee7a translateX(0) v\u00e0 translateY(-50%).\u00a0 B\u1ea1n c\u0169ng c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <strong>transform: translateY(-50%)<\/strong> \u0111\u1ec3 c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc ph\u1ea7n t\u1eed con.<\/span><\/p>\n<h3><b>C\u00e1ch 3: S\u1eed d\u1ee5ng line-height<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 c\u0103n gi\u1eefa CSS theo chi\u1ec1u d\u1ecdc b\u1eb1ng c\u00e1ch thi\u1ebft l\u1eadp gi\u00e1 tr\u1ecb line-height. Tuy nhi\u00ean, ph\u01b0\u01a1ng ph\u00e1p n\u00e0y hi\u1ec7u qu\u1ea3 \u0111\u1ec3 c\u0103n gi\u1eefa m\u1ed9t d\u00f2ng v\u0103n b\u1ea3n duy nh\u1ea5t, nh\u01b0ng kh\u00f4ng hi\u1ec7u qu\u1ea3 v\u1edbi nhi\u1ec1u d\u00f2ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 vi\u1ec7c c\u0103n gi\u1eefa b\u1eb1ng line-height ho\u1ea1t \u0111\u1ed9ng \u0111\u00fang, b\u1ea1n c\u1ea7n \u0111\u1ea3m b\u1ea3o gi\u00e1 tr\u1ecb line-height c\u1ee7a ph\u1ea7n t\u1eed con ph\u1ea3i b\u1eb1ng gi\u00e1 tr\u1ecb height c\u1ee7a ph\u1ea7n t\u1eed cha.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;!DOCTYPE html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;html&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">.center {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0line-height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: 3px solid green;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0text-align: center;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.center p {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0line-height: 1.5;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: inline-block;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0vertical-align: middle;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/style&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/head&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;body&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;h2&gt;Center with line-height&lt;\/h2&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;p&gt;In this example, we use the line-height property with a value that is equal to the height property to center the div element:&lt;\/p&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;div class=\"center\"&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;p&gt;I am vertically and horizontally centered.&lt;\/p&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/html&gt;<\/span><\/pre>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_4_cach_can_giua_CSS_theo_hai_chieu\"><\/span><strong>H\u01b0\u1edbng d\u1eabn 4 c\u00e1ch c\u0103n gi\u1eefa CSS theo hai chi\u1ec1u<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><b>C\u00e1ch 1: S\u1eed d\u1ee5ng CSS Absolute Positioning v\u00e0 Negative Margins<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 ph\u01b0\u01a1ng ph\u00e1p k\u1ebft h\u1ee3p gi\u1eefa c\u00e1ch c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc v\u00e0 theo chi\u1ec1u ngang s\u1eed d\u1ee5ng margin \u00e2m \u1edf ph\u00eda tr\u00ean. Gi\u1ed1ng nh\u01b0 l\u1ea7n tr\u01b0\u1edbc, b\u1ea1n c\u1ea7n ph\u1ea3i x\u00e1c \u0111\u1ecbnh \u0111\u01b0\u1ee3c chi\u1ec1u r\u1ed9ng v\u00e0 chi\u1ec1u cao c\u1ee7a element mu\u1ed1n c\u0103n gi\u1eefa \u0111\u1ec3 s\u1eed d\u1ee5ng gi\u00e1 tr\u1ecb th\u00edch h\u1ee3p cho thu\u1ed9c t\u00ednh <strong>margin-left<\/strong> v\u00e0 <strong>margin-right<\/strong>.<\/span><\/p>\n<h3><b>C\u00e1ch 2: S\u1eed d\u1ee5ng auto v\u1edbi absolute elements<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Th\u00f4ng th\u01b0\u1eddng, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng <strong>margin: auto<\/strong> \u0111\u1ec3 c\u0103n gi\u1eefa c\u00e1c th\u00e0nh ph\u1ea7n trong HTML. Tuy nhi\u00ean, c\u00e1ch n\u00e0y l\u1ea1i kh\u00f4ng hi\u1ec7u qu\u1ea3 v\u1edbi c\u00e1c th\u00e0nh ph\u1ea7n \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb tuy\u1ec7t \u0111\u1ed1i (absolute positioning). Khi n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh auto.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu c\u1ea3 ba &#8220;left&#8221; , &#8220;width&#8221; v\u00e0 &#8220;right&#8221; l\u00e0 auto: th\u00ec tr\u01b0\u1edbc ti\u00ean, b\u1ea1n c\u1ea7n \u0111i\u1ec1u ch\u1ec9nh gi\u00e1 tr\u1ecb cho <strong>&#8220;margin-left&#8221;<\/strong> v\u00e0 <strong>&#8220;margin-right&#8221;<\/strong> b\u1eb1ng 0. Ng\u01b0\u1ee3c l\u1ea1i, n\u1ebfu c\u1ea3 3 ch\u1ec9 s\u1ed1 n\u00e0y kh\u00f4ng ph\u1ea3i l\u00e0 <strong>auto<\/strong> ho\u1eb7c ch\u1ec9 c\u00f3 <strong>\u201cmargin-left\u201d<\/strong> v\u00e0 <strong>\u201cmargin-right\u201d<\/strong> l\u00e0 <strong>auto<\/strong>, b\u1ea1n c\u1ea7n ch\u1ec9nh hai l\u1ec1 c\u00f3 gi\u00e1 tr\u1ecb b\u1eb1ng nhau.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">T\u01b0\u01a1ng t\u1ef1 cho thu\u1ed9c t\u00ednh \u201cheight\u201d, \u201ctop\u201d v\u00e0 \u201cbottom\u201d. \u0110i\u1ec1u n\u00e0y c\u00f3 ngh\u0129a l\u00e0 b\u1ea1n c\u00f3 th\u1ec3 c\u0103n gi\u1eefa m\u1ed9t ph\u1ea7n t\u1eed tuy\u1ec7t \u0111\u1ed1i:\u00a0<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Theo chi\u1ec1u ngang n\u1ebfu thu\u1ed9c t\u00ednh left v\u00e0 right c\u00f3 c\u00f9ng gi\u00e1 tr\u1ecb v\u00e0 width (chi\u1ec1u r\u1ed9ng) c\u1ed1 \u0111\u1ecbnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Theo chi\u1ec1u d\u1ecdc n\u1ebfu thu\u1ed9c t\u00ednh top v\u00e0 bottom c\u00f3 c\u00f9ng gi\u00e1 tr\u1ecb v\u00e0 height (chi\u1ec1u cao) c\u1ed1 \u0111\u1ecbnh.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c ngo\u1ea1i l\u1ec7 n\u00e0y, b\u1ea1n c\u00f3 th\u1ec3 g\u00e1n c\u00e1c thu\u1ed9c t\u00ednh b\u00ean d\u01b0\u1edbi \u0111\u1ec3 c\u0103n gi\u1eefa m\u1ed9t ph\u1ea7n t\u1eed tuy\u1ec7t \u0111\u1ed1i trong ph\u1ea7n t\u1eed m\u1eb9 c\u1ee7a n\u00f3.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">.parent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0position: relative;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0height: 150px;\u00a0<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0margin: auto;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0inset: 0; \/* \u0111\u1eb7t left, right, top v\u00e0 bottom v\u1ec1 0 *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0width: 70px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0height: 20px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0}<\/span><\/pre>\n<p><span style=\"font-weight: 400;\"><strong>inset: 0<\/strong> l\u00e0 c\u00e1ch vi\u1ebft t\u1eaft \u0111\u1ec3 \u0111\u1eb7t t\u1ea5t c\u1ea3 b\u1ed1n thu\u1ed9c t\u00ednh &#8211; left, right, top v\u00e0 bottom l\u00e0 0.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 k\u1ebft h\u1ee3p c\u00e1c thu\u1ed9c t\u00ednh<strong> left, top<\/strong> v\u00e0 <strong>transform:translate<\/strong> \u0111\u1ec3 th\u1ef1c hi\u1ec7n \u0111i\u1ec1u n\u00e0y:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\"> .parent {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position: relative;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\/* s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p n\u00e0y \u0111\u1ec3 c\u0103n gi\u1eefa element absolute *\/<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0.child {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0position: absolute;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0left: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0top: 50%;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0transform: translate(-50%, -50%);<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0}<\/span><\/pre>\n<h3><b>C\u00e1ch 3: <\/b><b>S\u1eed d\u1ee5ng Flexbox<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u0103n gi\u1eefa element(s) con theo c\u1ea3 hai h\u01b0\u1edbng ngang v\u00e0 d\u1ecdc, h\u00e3y \u00e1p d\u1ee5ng <strong>justify-content: center<\/strong> v\u00e0 <strong>align-items: center<\/strong> cho ph\u1ea7n t\u1eed cha:<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p style=\"text-align: left;\"><strong>HTML<\/strong><\/p>\n<\/td>\n<td>\n<p style=\"text-align: left;\"><strong>CSS<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"child\"&gt;&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-family: arial;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0font-size: 24px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0margin: 25px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0width: 350px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 200px;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0outline: dashed 1px black;<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0\/* C\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc v\u00e0 chi\u1ec1u ngang *\/<\/span>\r\n\r\n<span style=\"font-weight: 400;\"> \u00a0display: flex;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0justify-content: center;<\/span>\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0align-items: center;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.child {<\/span>\r\n<span style=\"font-weight: 400;\">width: 50px;<\/span>\r\n<span style=\"font-weight: 400;\">height: 50px;<\/span>\r\n<span style=\"font-weight: 400;\">background-color: red;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"https:\/\/prnt.sc\/VmM4vijHMj6u\"><span style=\"font-weight: 400;\">H\u00ecnh \u1ea3nh v\u00ed d\u1ee5<\/span><\/a><\/p>\n<h3><strong>C\u00e1ch 4: S\u1eed d\u1ee5ng grid<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">M\u1ed9t ph\u01b0\u01a1ng ph\u00e1p kh\u00e1c b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng \u0111\u1ec3 c\u0103n gi\u1eefa m\u1ed9t h\u1ed9p b\u00ean trong m\u1ed9t h\u1ed9p kh\u00e1c l\u00e0 bi\u1ebfn h\u1ed9p ch\u1ee9a th\u00e0nh grid container (b\u1ed9 ch\u1ee9a d\u1ea1ng l\u01b0\u1edbi) tr\u01b0\u1edbc, sau \u0111\u00f3 \u0111\u1eb7t thu\u1ed9c t\u00ednh place-items c\u1ee7a n\u00f3 th\u00e0nh center \u0111\u1ec3 c\u0103n gi\u1eefa c\u00e1c m\u1ee5c theo c\u1ea3 tr\u1ee5c kh\u1ed1i (block axis) v\u00e0 tr\u1ee5c n\u1ed9i tuy\u1ebfn (inline axis).<\/span><\/p>\n<table>\n<tbody>\n<tr>\n<td><span style=\"font-weight: 400;\">HTML<\/span><\/td>\n<td><span style=\"font-weight: 400;\">CSS<\/span><\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">&lt;div class=\"container\"&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;div class=\"item\"&gt;I am centered!&lt;\/div&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/div&gt;<\/span><\/pre>\n<\/td>\n<td style=\"text-align: left;\">\n<pre><span style=\"font-weight: 400;\">div {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0border: solid 3px;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0padding: 1em;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0max-width: 75%;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span>\r\n\r\n<span style=\"font-weight: 400;\">.container {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0display: grid;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0place-items: center;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0height: 8em;<\/span>\r\n<span style=\"font-weight: 400;\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">Thay v\u00ec s\u1eed d\u1ee5ng place-items: center; cho h\u1ed9p ch\u1ee9a, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ea1t \u0111\u01b0\u1ee3c hi\u1ec7u \u1ee9ng c\u0103n gi\u1eefa t\u01b0\u01a1ng t\u1ef1 b\u1eb1ng c\u00e1ch \u0111\u1eb7t place-content: center; cho h\u1ed9p ch\u1ee9a, ho\u1eb7c \u00e1p d\u1ee5ng place-self: center ho\u1eb7c margin: auto; tr\u1ef1c ti\u1ebfp cho ph\u1ea7n t\u1eed b\u00ean trong.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cau_hoi_thuong_gap_ve_can_giua_CSS\"><\/span><strong>C\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 c\u0103n gi\u1eefa CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>L\u00e0m c\u00e1ch n\u00e0o \u0111\u1ec3 c\u0103n gi\u1eefa trang web trong CSS?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00f3 nhi\u1ec1u c\u00e1ch \u0111\u1ec3 c\u0103n gi\u1eefa trang web trong CSS:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa v\u0103n b\u1ea3n: S\u1eed d\u1ee5ng text-align: center;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa m\u1ed9t ph\u1ea7n t\u1eed: S\u1eed d\u1ee5ng margin: 0 auto ho\u1eb7c flexbox;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa to\u00e0n b\u1ed9 trang web: S\u1eed d\u1ee5ng margin: 0 auto; cho ph\u1ea7n t\u1eed body ho\u1eb7c CSS Grid.<\/span><\/li>\n<\/ul>\n<h3><strong>Nh\u1eefng thu\u1ed9c t\u00ednh n\u00e0o gi\u00fap c\u0103n gi\u1eefa trong CSS Grid?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Trong b\u1ed1 c\u1ee5c l\u01b0\u1edbi CSS (CSS grid layout), c\u1ea3 l\u01b0\u1edbi b\u00ean trong v\u00f9ng ch\u1ee9a v\u00e0 c\u00e1c th\u00e0nh ph\u1ea7n c\u1ee7a l\u01b0\u1edbi c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c \u0111\u1ecbnh v\u1ecb b\u1eb1ng 6 thu\u1ed9c t\u00ednh sau: justify-items, align-items, justify-content, align-content, justify-self v\u00e0 align-self.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_ve_huong_dan_can_giua_CSS\"><\/span><strong>T\u1ed5ng k\u1ebft v\u1ec1 h\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">C\u00f3 r\u1ea5t nhi\u1ec1u ph\u01b0\u01a1ng ph\u00e1p c\u0103n gi\u1eefa CSS, trong b\u00e0i vi\u1ebft n\u00e0y ITviec \u0111\u00e3 h\u01b0\u1edbng d\u1eabn b\u1ea1n ba ph\u01b0\u01a1ng ph\u00e1p c\u0103n gi\u1eefa ph\u1ed5 bi\u1ebfn nh\u1ea5t g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa theo chi\u1ec1u ngang: S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh text-align: center; margin: 0 auto, display: flex,&#8230;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc: S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh position v\u00e0 negative margin, line-height,&#8230;\u00a0\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u0103n gi\u1eefa theo c\u1ea3 hai chi\u1ec1u: S\u1eed d\u1ee5ng thu\u1ed9c t\u00ednh display: flex; justify-content: center; align-items: center;&#8230;<\/span><\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"sp-no-webp wp-image-5668 aligncenter sp-no-webp entered lazyloaded\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-200x200.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-60x60.png 60w\" alt=\"robby-2\" width=\"300\" height=\"300\" data-lazy-src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png\" data-lazy-sizes=\"(max-width: 300px) 100vw, 300px\" data-lazy-srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2.png 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-200x200.png 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2015\/07\/Robby2-60x60.png 60w\" data-ll-status=\"loaded\" \/><\/figure>\n<\/div>\n<p id=\"block-bdf220a1-3635-4794-9101-81d879939b92\" class=\"has-text-align-center\" style=\"text-align: center;\"><strong>B\u1ea1n th\u1ea5y b\u00e0i vi\u1ebft hay v\u00e0 h\u1eefu \u00edch? \u0110\u1eebng ng\u1ea1i Share v\u1edbi b\u1ea1n b\u00e8 v\u00e0 \u0111\u1ed3ng nghi\u1ec7p nh\u00e9.<\/strong><\/p>\n<p id=\"block-a1315aab-406f-48df-97fc-6b9584e6e134\" class=\"has-text-align-center\" style=\"text-align: center;\"><strong>V\u00e0 nhanh tay tham kh\u1ea3o\u00a0<a href=\"http:\/\/itviec.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">vi\u1ec7c l\u00e0m IT<\/a>\u00a0\u201cch\u1ea5t\u201d tr\u00ean ITviec<\/strong>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>C\u0103n gi\u1eefa b\u1ed1 c\u1ee5c trang web v\u1edbi CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm nh\u1eefng h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang ki\u1ebfn th\u1ee9c, \u0111\u1eebng b\u1ecf qua b\u00e0i vi\u1ebft n\u00e0y c\u1ee7a ITviec nh\u00e9. \u0110\u1ecdc b\u00e0i vi\u1ebft \u0111\u1ec3 hi\u1ec3u r\u00f5 h\u01a1n: Vai tr\u00f2 [&hellip;]<\/p>\n","protected":false},"author":213,"featured_media":66831,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-66818","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u - ITviec Blog<\/title>\n<meta name=\"description\" content=\"C\u0103n gi\u1eefa CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang ki\u1ebfn th\u1ee9c.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u\" \/>\n<meta property=\"og:description\" content=\"C\u0103n gi\u1eefa b\u1ed1 c\u1ee5c trang web v\u1edbi CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm nh\u1eefng h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-05-09T11:15:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Linh Trao\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Linh Trao\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u - ITviec Blog","description":"C\u0103n gi\u1eefa CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang ki\u1ebfn th\u1ee9c.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/","og_locale":"vi_VN","og_type":"article","og_title":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u","og_description":"C\u0103n gi\u1eefa b\u1ed1 c\u1ee5c trang web v\u1edbi CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. N\u1ebfu b\u1ea1n \u0111ang t\u00ecm ki\u1ebfm nh\u1eefng h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang","og_url":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-05-09T11:15:10+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png","type":"image\/png"}],"author":"Linh Trao","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Linh Trao","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"13 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/"},"author":{"name":"Linh Trao","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16"},"headline":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u","datePublished":"2024-05-09T11:15:10+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/"},"wordCount":3035,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/","url":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/","name":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png","datePublished":"2024-05-09T11:15:10+00:00","description":"C\u0103n gi\u1eefa CSS \u0111\u01b0\u1ee3c xem l\u00e0 m\u1ed9t th\u1ee7 thu\u1eadt kh\u00f3. B\u00e0i vi\u1ebft s\u1ebd h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u0103n gi\u1eefa CSS \u0111\u01a1n gi\u1ea3n, d\u1ec5 hi\u1ec3u v\u00e0 l\u1ea1i \u0111\u00fang ki\u1ebfn th\u1ee9c.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/04\/Thumbnail-can-giua-css-vippro.png","width":1500,"height":790,"caption":"c\u0103n gi\u1eefa css - itviec blog"},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/huong-dan-can-giua-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"H\u01b0\u1edbng d\u1eabn c\u0103n gi\u1eefa CSS chi ti\u1ebft theo chi\u1ec1u ngang, d\u1ecdc, hai chi\u1ec1u"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/6d1bcbfa05475cbc5a2eaf0727501a16","name":"Linh Trao","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/03\/trao-thi-tung-linh-author-e1709892478113-100x100.jpg","caption":"Linh Trao"},"url":"https:\/\/itviec.com\/blog\/author\/linh-trao\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/66818","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=66818"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/66818\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/66831"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=66818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=66818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=66818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}