{"id":14527,"date":"2021-09-04T22:53:50","date_gmt":"2021-09-04T22:53:50","guid":{"rendered":"https:\/\/freehost.page\/?p=14527"},"modified":"2021-09-04T22:53:50","modified_gmt":"2021-09-04T22:53:50","slug":"can-giua-trong-css","status":"publish","type":"post","link":"https:\/\/kiencang.net\/can-giua-trong-css\/","title":{"rendered":"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n"},"content":{"rendered":"\n

C\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong CSS c\u00f3 l\u1ebd l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 m\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf giao di\u1ec7n hay ph\u00e0n n\u00e0n nh\u1ea5t. T\u1ea1i sao n\u00f3 l\u1ea1i kh\u00f3 kh\u0103n nh\u01b0 v\u1eady?<\/em> <\/p>\n\n\n\n

T\u00f4i ngh\u0129 v\u1ea5n \u0111\u1ec1 kh\u00f4ng ph\u1ea3i l\u00e0 n\u00f3 qu\u00e1 kh\u00f3 th\u1ef1c hi\u1ec7n, m\u00e0 l\u00e0 v\u00ec c\u00f3 r\u1ea5t nhi\u1ec1u c\u00e1ch kh\u00e1c nhau \u0111\u1ec3 l\u00e0m \u0111i\u1ec1u \u0111\u00f3- ph\u1ee5 thu\u1ed9c v\u00e0o t\u00ecnh hu\u1ed1ng c\u1ee5 th\u1ec3, c\u00e1i kh\u00f3 \u1edf \u0111\u00e2y l\u00e0 kh\u00f4ng bi\u1ebft \u0111i theo h\u01b0\u1edbng n\u00e0o.<\/p>\n\n\n\n

V\u00ec th\u1ebf ch\u00fang ta s\u1ebd l\u00e0m c\u00e1c ph\u00e2n lo\u1ea1i v\u00e0 hy v\u1ecdng vi\u1ec7c l\u1ef1a ch\u1ecdn s\u1ebd d\u1ec5 d\u00e0ng h\u01a1n. N\u00e0o ch\u00fang ta c\u00f9ng b\u1eaft \u0111\u1ea7u th\u00f4i!<\/p>\n\n\n\n

T\u00f4i c\u1ea7n c\u0103n gi\u1eefa…<\/p>\n\n\n\n

\n\n\n\n

Theo chi\u1ec1u ngang (horizontally)<\/h2>\n\n\n\n

1. Li\u1ec7u n\u00f3 c\u00f3 ph\u1ea3i l\u00e0 ph\u1ea7n t\u1eed inline<\/code> ho\u1eb7c inline-*<\/code> (ch\u1eb3ng h\u1ea1n nh\u01b0 v\u0103n b\u1ea3n ho\u1eb7c li\u00ean k\u1ebft)?<\/strong><\/p>\n\n\n\n

B\u1ea1n c\u00f3 th\u1ec3 c\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed inline<\/code> theo chi\u1ec1u ngang trong ph\u1ea7n t\u1eed bao l\u00e0 c\u1ea5p kh\u1ed1i (block-level<\/code>), v\u1edbi d\u00f2ng l\u1ec7nh sau:<\/p>\n\n\n\n

.center {text-align: center; }<\/code><\/pre>\n\n\n\n
C\u00e1i n\u00e0y ho\u1ea1t \u0111\u1ed9ng cho c\u00e1c th\u00e0nh ph\u1ea7n ki\u1ec3u inline<\/code>, inline-block<\/code>, inline-table<\/code>, inline-flex<\/code>, v\u00e2n v\u00e2n.<\/p>\n\n\n\n
M\u00e3 m\u1eabu v\u00ed d\u1ee5 cho v\u0103n b\u1ea3n thu\u1ea7n:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>V\u0103n b\u1ea3n \u0111\u00e3 c\u0103n gi\u1eefa<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div {width:500px; \n                 border:1px solid black;\n                 height:50px; text-align:center;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div>T\u00f4i c\u1ea7n c\u0103n gi\u1eefa c\u00e1i n\u00e0y<\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Ho\u1eb7c cho li\u00ean k\u1ebft:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Li\u00ean k\u1ebft \u0111\u00e3 c\u0103n gi\u1eefa<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div {width:500px; \n                 border:1px solid black;\n                 height:50px; text-align:center;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div><a href=\"#\">\u0110\u00e2y l\u00e0 li\u00ean k\u1ebft<\/a><\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
B\u1ea1n c\u0169ng \u00e1p d\u1ee5ng \u0111\u01b0\u1ee3c \u0111i\u1ec1u n\u00e0y v\u1edbi c\u00e1c th\u1ebb h:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Th\u1ebb h2 \u0111\u00e3 c\u0103n gi\u1eefa<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div {width:500px; \n                 border:1px solid black;\n                 height:50px; text-align:center;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div><h2>\u0110\u00e2y l\u00e0 th\u1ebb h2<\/h2><\/div>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
\u1ede \u0111\u00e2y ch\u00fang ta c\u1ea7n l\u01b0u \u00fd, b\u1ea3n th\u00e2n c\u00e1c th\u1ebb h l\u00e0 block ch\u1ee9 kh\u00f4ng ph\u1ea3i inline<\/code> hay inline-*<\/code>, th\u1ebf t\u1ea1i sao n\u00f3 v\u1eabn c\u0103n gi\u1eefa b\u1eb1ng l\u1ec7nh tr\u00ean \u0111\u01b0\u1ee3c. T\u00f4i ch\u1ec9 c\u00f3 th\u1ec3 n\u00f3i l\u00e0 v\u00ec n\u00f3 c\u0169ng l\u00e0 v\u0103n b\u1ea3n, v\u00e0 text-align:center<\/code> l\u00e0 c\u0103n gi\u1eefa cho v\u0103n b\u1ea3n n\u00ean m\u1eb7c d\u00f9 th\u1ebb h l\u00e0 block, t\u00f4i v\u1eabn d\u00f9ng c\u00e2u l\u1ec7nh tr\u00ean \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n
B\u1ea3n th\u00e2n c\u00e1c th\u1ebb h c\u00f3 th\u1ec3 t\u1ef1 c\u0103n gi\u1eefa ch\u00ednh n\u00f3 trong th\u1ebb div, v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Th\u1ebb h2 \u0111\u00e3 t\u1ef1 c\u0103n gi\u1eefa, ch\u1ee9 kh\u00f4ng c\u1ea7n th\u00f4ng qua div<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div {width:500px; \n                 border:1px solid black;\n                 height:50px;}\n            h2 {text-align:center;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div><h2>\u0110\u00e2y l\u00e0 th\u1ebb h2<\/h2><\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\u0110i\u1ec1u n\u00e0y c\u0169ng \u0111\u00fang y h\u1ec7t v\u1edbi th\u1ebb v\u0103n b\u1ea3n p, c\u0169ng l\u00e0 th\u1ebb block.<\/p>\n\n\n\n
\n\n\n\n
Gi\u1edd l\u00e0 cho n\u00fat b\u1ea5m d\u1ea1ng input submit<\/code> ho\u1eb7c button<\/code>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>C\u00e1c n\u00fat b\u1ea5m \u0111\u00e3 c\u0103n gi\u1eefa<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div {width:500px; \n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:50px; text-align:center;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div><input type=\"submit\" value=\"N\u00fat Submit\"><\/div>\n        <div><button>N\u00fat Button<\/button><\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
C\u00f3 l\u1ebd c\u0103n gi\u1eefa v\u0103n b\u1ea3n b\u1eb1ng text-align:center<\/code> l\u00e0 ch\u1ec9 th\u1ecb c\u0103n gi\u1eefa m\u00e0 nhi\u1ec1u ng\u01b0\u1eddi bi\u1ebft, ph\u1ea7n sau s\u1ebd \u00edt ng\u01b0\u1eddi bi\u1ebft h\u01a1n.<\/p>\n\n\n\n
2. N\u00f3 l\u00e0 ph\u1ea7n t\u1eed d\u1ea1ng block<\/strong><\/p>\n\n\n\n
B\u1ea1n c\u00f3 th\u1ec3 c\u0103n gi\u1eefa ph\u1ea7n t\u1eed d\u1ea1ng block b\u1eb1ng c\u00e1ch cung c\u1ea5p cho n\u00f3 thu\u1ed9c t\u00ednh margin-left<\/code> v\u00e0 margin-right<\/code> l\u00e0 auto<\/code> (v\u00e0 n\u00f3 ph\u1ea3i \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng width<\/code>, n\u1ebfu kh\u00f4ng n\u00f3 s\u1ebd c\u00f3 chi\u1ec1u r\u1ed9ng full<\/code> c\u1ee7a th\u1ebb cha, v\u00e0 kh\u00f4ng th\u1ec3 c\u0103n gi\u1eefa \u0111\u01b0\u1ee3c). C\u00e1i n\u00e0y th\u01b0\u1eddng \u0111\u01b0\u1ee3c gi\u1ea3i quy\u1ebft nh\u01b0 th\u1ebf n\u00e0y:<\/p>\n\n\n\n
.centerMe {\nmargin: 0 auto;\n }<\/code><\/pre>\n\n\n\n
V\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>Th\u1ebb div \u0111\u00e3 c\u0103n gi\u1eefa<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#main {width:1000px; \n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:300px;}\n            #centerMe {width:150px; height:150px; border:1px solid black; margin:0 auto;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"main\"><div id=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y<\/div><\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Khi b\u1ea1n kh\u00f4ng thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng cho ph\u1ea7n t\u1eed block, c\u0103n gi\u1eefa s\u1ebd th\u1ea5t b\u1ea1i, ph\u1ea7n t\u1eed s\u1ebd l\u1ea5y lu\u1ed1n chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed cha, v\u00ed d\u1ee5:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>C\u0103n gi\u1eefa th\u1ea5t b\u1ea1i v\u00ec kh\u00f4ng thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng cho ph\u1ea7n t\u1eed c\u1ea7n c\u0103n<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#main {width:1000px; \n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:300px;}\n            #centerMe {height:150px; border:1px solid black; margin:0 auto;}\n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"main\"><div id=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y<\/div><\/div>\n    <\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
Ph\u01b0\u01a1ng ph\u00e1p c\u0103n gi\u1eefa n\u00e0y s\u1ebd ho\u1ea1t \u0111\u1ed9ng b\u1ea5t k\u1ec3 l\u00e0 chi\u1ec1u r\u1ed9ng c\u1ee7a ph\u1ea7n t\u1eed block m\u00e0 b\u1ea1n c\u1ea7n c\u0103n gi\u1eefa hay ph\u1ea7n t\u1eed cha c\u1ee7a n\u00f3 l\u00e0 bao nhi\u00eau.<\/p>\n\n\n\n
L\u01b0u \u00fd l\u00e0 b\u1ea1n kh\u00f4ng th\u1ec3 \u0111\u01b0a m\u1ed9t ph\u1ea7n t\u1eed float<\/code> c\u0103n gi\u1eefa \u0111\u01b0\u1ee3c.<\/p>\n\n\n\n
3. C\u00f3 nhi\u1ec1u h\u01a1n m\u1ed9t ph\u1ea7n t\u1eed block<\/strong><\/p>\n\n\n\n
N\u1ebfu b\u1ea1n c\u00f3 t\u1eeb hai ph\u1ea7n t\u1eed block tr\u1edf l\u00ean c\u1ea7n \u0111\u01b0\u1ee3c c\u0103n gi\u1eefa trong m\u1ed9t h\u00e0ng, s\u1ebd hi\u1ec7u qu\u1ea3 h\u01a1n n\u1ebfu b\u1ea1n bi\u1ebfn \u0111\u1ed5i ki\u1ec3u display<\/code> c\u1ee7a ch\u00fang. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 vi\u1ec7c bi\u1ebfn ch\u00fang th\u00e0nh d\u1ea1ng inline-block<\/code> v\u00e0 m\u1ed9t v\u00ed d\u1ee5 v\u1ec1 flexbox<\/code>.<\/p>\n\n\n\n
V\u00ed d\u1ee5 v\u1ec1<\/strong> inline-block<\/code>:<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n    <head>\n        <title>C\u0103n gi\u1eefa nhi\u1ec1u th\u00e0nh ph\u1ea7n block v\u1edbi inline-block<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#main {padding: 20px;\n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:300px; text-align:center;}\n\n            .centerMe {\n                width:200px; \n                height:auto; \n                border:1px solid black; \n                padding:15px; \n                background-color:black; \n                color:#fcfcfc; \n                margin:10px; display:inline-block;}\n            \n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"main\">\n            <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y. T\u00f4i c\u00f3 nhi\u1ec1u ch\u1eef h\u01a1n ng\u01b0\u1eddi anh em c\u1ee7a m\u00ecnh. Li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
\u1ede \u0111\u00e2y ch\u00fang ta th\u1ef1c hi\u1ec7n hai vi\u1ec7c:<\/p>\n\n\n\n
  • Bi\u1ebfn c\u00e1c div<\/code> c\u1ea7n c\u0103n gi\u1eefa v\u1ed1n c\u00f3 thu\u1ed9c t\u00ednh display l\u00e0 block<\/code> th\u00e0nh inline-block<\/code>;<\/li>
  • \u0110\u1ec3 text-align<\/code> c\u1ee7a th\u1ebb cha l\u00e0 center<\/code>;<\/li><\/ul>\n\n\n\n
    L\u00fac n\u00e0y ch\u00fang ta c\u0103n gi\u1eefa nh\u01b0 ki\u1ec3u c\u0103n gi\u1eefa v\u0103n b\u1ea3n \u0111\u00e3 n\u00f3i \u1edf ph\u1ea7n \u0111\u1ea7u.<\/p>\n\n\n\n
    Khi b\u1ea1n thu h\u1eb9p m\u00e0n h\u00ecnh (thu h\u1eb9p k\u00edch c\u1ee1 c\u1ee7a th\u1ebb cha), c\u00e1c ph\u1ea7n t\u1eed s\u1ebd nh\u1ea3y d\u00f2ng nh\u01b0ng v\u1eabn s\u1eafp x\u1ebfp \u0111\u1ec3 c\u0103n v\u00e0o gi\u1eefa.<\/p>\n\n\n\n
     V\u00ed d\u1ee5 v\u1ec1<\/strong> flex-box<\/code>:<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n    <head>\n        <title>C\u0103n gi\u1eefa nhi\u1ec1u th\u00e0nh ph\u1ea7n block tr\u00ean c\u00f9ng d\u00f2ng<\/title>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <style>\n            div#main {padding: 20px;\n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:300px;\n                 display:flex; \n                 justify-content:center;}\n            \n            .centerMe {\n                width:200px; \n                height:auto; \n                border:1px solid black; \n                padding:15px; \n                background-color:black; \n                color:#fcfcfc; \n                margin:10px;}\n            \n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"main\">\n            <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y. T\u00f4i c\u00f3 nhi\u1ec1u ch\u1eef h\u01a1n ng\u01b0\u1eddi anh em c\u1ee7a m\u00ecnh. Li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    Trong tr\u01b0\u1eddng h\u1ee3p n\u00e0y, th\u1ebb cha c\u1ea7n b\u1ed5 sung 2 thu\u1ed9c t\u00ednh, \u0111\u00f3 l\u00e0:<\/p>\n\n\n\n
    display:flex; justify-content:center;<\/code><\/pre>\n\n\n\n
    C\u00e1c th\u1ebb con kh\u00f4ng c\u1ea7n th\u00eam thu\u1ed9c t\u00ednh g\u00ec.<\/p>\n\n\n\n
    L\u00fac n\u00e0y c\u00e1c th\u1ebb con s\u1ebd n\u1eb1m tr\u00ean c\u00f9ng d\u00f2ng v\u00e0 c\u0103n gi\u1eefa d\u00f9 b\u1ea1n thu h\u1eb9p m\u00e0n h\u00ecnh, n\u00f3 nh\u01b0 m\u1ed9t ki\u1ec3u responsive v\u1eady, c\u00e1c c\u1ed9t t\u1ef1 \u0111\u1ed9ng co gi\u00e3n ngay c\u1ea3 khi \u0111\u00e3 \u0111\u01b0\u1ee3c thi\u1ebft l\u1eadp chi\u1ec1u r\u1ed9ng c\u1ed1 \u0111\u1ecbnh l\u00e0 200px nh\u01b0 \u1edf tr\u00ean.<\/p>\n\n\n\n
    —<\/p>\n\n\n\n
    Trong tr\u01b0\u1eddng h\u1ee3p b\u1ea1n c\u00f3 nhi\u1ec1u ph\u1ea7n t\u1eed c\u1ea5p \u0111\u1ed9 block mu\u1ed1n hi\u1ec3n th\u1ecb theo ki\u1ec3u x\u1ebfp ch\u1ed3ng l\u00ean nhau th\u00ec k\u1ef9 thu\u1eadt margin auto<\/code> v\u1eabn d\u00f9ng \u1ed5n.<\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n    <head>\n        <title>C\u0103n gi\u1eefa nhi\u1ec1u th\u00e0nh ph\u1ea7n block v\u1edbi margin auto<\/title>\n        <meta charset=\"UTF-8\">\n        <style>\n            div#main {padding: 20px;\n                 border:1px solid black;\n                 margin-bottom:15px;\n                 height:300px;}\n            .centerMe {\n                width:200px; \n                height:auto; \n                border:1px solid black; \n                padding:15px; \n                background-color:black; \n                color:#fcfcfc; \n                margin: 5px auto;}\n            \n        <\/style>    \n    <\/head>\n    <body>\n        <div id=\"main\">\n            <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y. T\u00f4i c\u00f3 nhi\u1ec1u ch\u1eef h\u01a1n ng\u01b0\u1eddi anh em c\u1ee7a m\u00ecnh. Li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n             <div class=\"centerMe\">T\u00f4i c\u1ea7n c\u0103n gi\u1eefa th\u1ebb div n\u00e0y, li\u1ec7u c\u00f3 th\u00e0nh c\u00f4ng<\/div>\n        <\/div>\n    <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
    \u1ede \u0111\u00e2y kh\u00e1c l\u00e0 b\u1ea1n kh\u00f4ng c\u1ea7n \u0111\u1ec3 margin:0 auto<\/code>; m\u00e0 ch\u1ec9 c\u1ea7n \u0111\u1ec3 auto l\u00e0 \u0111\u1ee7, s\u1ed1 0 c\u00f3 th\u1ec3 thay b\u1eb1ng gi\u00e1 tr\u1ecb kh\u00e1c. Nh\u01b0 tr\u01b0\u1eddng h\u1ee3p tr\u00ean l\u00e0 margin: 5px auto;<\/code> <\/p>\n\n\n\n
    \n\n\n\n
    K\u1ebft lu\u1eadn<\/h2>\n\n\n\n
    B\u1ea1n ho\u00e0n to\u00e0n c\u00f3 kh\u1ea3 n\u0103ng ch\u1ee7 \u0111\u1ed9ng trong vi\u1ec7c c\u0103n gi\u1eefa m\u1ecdi th\u1ee9 theo chi\u1ec1u ngang trong CSS. Nh\u01b0ng ch\u00fang ta c\u1ea7n l\u1ef1a ch\u1ecdn c\u00e1c gi\u1ea3i ph\u00e1p ph\u00f9 h\u1ee3p, ch\u1ecdn \u0111\u00fang m\u1ecdi th\u1ee9 s\u1ebd \u1ed5n th\u1ecfa.<\/p>\n\n\n\n
    Ch\u00fang ta s\u1ebd h\u1ecdc c\u00e1ch c\u0103n gi\u1eefa theo chi\u1ec1u d\u1ecdc trong b\u00e0i vi\u1ebft sau. Xin ch\u00e0o v\u00e0 h\u1eb9n g\u1eb7p l\u1ea1i c\u00e1c b\u1ea1n.<\/p>\n\n\n\n
    (L\u01b0\u1ee3c d\u1ecbch t\u1eeb b\u00e0i vi\u1ebft Centering in CSS: A Complete Guide c\u1ee7a t\u00e1c gi\u1ea3 Chris Coyier tr\u00ean trang css-tricks)<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
    C\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong CSS c\u00f3 l\u1ebd l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 m\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf giao di\u1ec7n hay ph\u00e0n n\u00e0n nh\u1ea5t. T\u1ea1i sao n\u00f3 l\u1ea1i kh\u00f3 kh\u0103n nh\u01b0 v\u1eady? T\u00f4i ngh\u0129 v\u1ea5n \u0111\u1ec1 kh\u00f4ng ph\u1ea3i l\u00e0 n\u00f3 qu\u00e1 kh\u00f3 th\u1ef1c hi\u1ec7n, m\u00e0 l\u00e0 v\u00ec c\u00f3 r\u1ea5t nhi\u1ec1u c\u00e1ch kh\u00e1c nhau \u0111\u1ec3 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[229],"tags":[],"yoast_head":"\nC\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n • Ki\u1ebfn c\u00e0ng<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiencang.net\/can-giua-trong-css\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n • Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"og:description\" content=\"C\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong CSS c\u00f3 l\u1ebd l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 m\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf giao di\u1ec7n hay ph\u00e0n n\u00e0n nh\u1ea5t. T\u1ea1i sao n\u00f3 l\u1ea1i kh\u00f3 kh\u0103n nh\u01b0 v\u1eady? T\u00f4i ngh\u0129 v\u1ea5n \u0111\u1ec1 kh\u00f4ng ph\u1ea3i l\u00e0 n\u00f3 qu\u00e1 kh\u00f3 th\u1ef1c hi\u1ec7n, m\u00e0 l\u00e0 v\u00ec c\u00f3 r\u1ea5t nhi\u1ec1u c\u00e1ch kh\u00e1c nhau \u0111\u1ec3 …\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiencang.net\/can-giua-trong-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Ki\u1ebfn c\u00e0ng\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/anhducnguyen87\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-04T22:53:50+00:00\" \/>\n<meta name=\"author\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nguy\u1ec5n \u0110\u1ee9c Anh\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 ph\u00fat\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n • Ki\u1ebfn c\u00e0ng","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:\/\/kiencang.net\/can-giua-trong-css\/","og_locale":"vi_VN","og_type":"article","og_title":"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n • Ki\u1ebfn c\u00e0ng","og_description":"C\u0103n gi\u1eefa c\u00e1c ph\u1ea7n t\u1eed trong CSS c\u00f3 l\u1ebd l\u00e0 m\u1ed9t trong c\u00e1c v\u1ea5n \u0111\u1ec1 m\u00e0 ng\u01b0\u1eddi thi\u1ebft k\u1ebf giao di\u1ec7n hay ph\u00e0n n\u00e0n nh\u1ea5t. T\u1ea1i sao n\u00f3 l\u1ea1i kh\u00f3 kh\u0103n nh\u01b0 v\u1eady? T\u00f4i ngh\u0129 v\u1ea5n \u0111\u1ec1 kh\u00f4ng ph\u1ea3i l\u00e0 n\u00f3 qu\u00e1 kh\u00f3 th\u1ef1c hi\u1ec7n, m\u00e0 l\u00e0 v\u00ec c\u00f3 r\u1ea5t nhi\u1ec1u c\u00e1ch kh\u00e1c nhau \u0111\u1ec3 …","og_url":"https:\/\/kiencang.net\/can-giua-trong-css\/","og_site_name":"Ki\u1ebfn c\u00e0ng","article_author":"https:\/\/www.facebook.com\/anhducnguyen87\/","article_published_time":"2021-09-04T22:53:50+00:00","author":"Nguy\u1ec5n \u0110\u1ee9c Anh","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Nguy\u1ec5n \u0110\u1ee9c Anh","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"7 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiencang.net\/can-giua-trong-css\/","url":"https:\/\/kiencang.net\/can-giua-trong-css\/","name":"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n • Ki\u1ebfn c\u00e0ng","isPartOf":{"@id":"https:\/\/kiencang.net\/#website"},"datePublished":"2021-09-04T22:53:50+00:00","dateModified":"2021-09-04T22:53:50+00:00","author":{"@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16"},"breadcrumb":{"@id":"https:\/\/kiencang.net\/can-giua-trong-css\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiencang.net\/can-giua-trong-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiencang.net\/can-giua-trong-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiencang.net\/"},{"@type":"ListItem","position":2,"name":"C\u0103n gi\u1eefa theo chi\u1ec1u ngang trong CSS: h\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n"}]},{"@type":"WebSite","@id":"https:\/\/kiencang.net\/#website","url":"https:\/\/kiencang.net\/","name":"Ki\u1ebfn c\u00e0ng","description":"\u00d4m l\u00fd thuy\u1ebft, h\u00f4n th\u1ef1c h\u00e0nh","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiencang.net\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"vi"},{"@type":"Person","@id":"https:\/\/kiencang.net\/#\/schema\/person\/5e7e1a04d8d1218ad8c421ba43d25c16","name":"Nguy\u1ec5n \u0110\u1ee9c Anh","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/kiencang.net\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6d71f9b89393952a8382e30dad26c1ec?s=96&d=monsterid&r=g","caption":"Nguy\u1ec5n \u0110\u1ee9c Anh"},"description":"Sinh n\u0103m 1987, t\u1ed1t nghi\u1ec7p Cao \u0111\u1eb3ng th\u1ef1c h\u00e0nh FPT qu\u00e3ng 2014, chuy\u00ean ng\u00e0nh Thi\u1ebft k\u1ebf website. T\u00f4i th\u00edch Content, SEO, Ads, T\u0103ng t\u1ed1c website v\u00e0 Th\u01b0\u01a1ng m\u1ea1i \u0111i\u1ec7n t\u1eed. B\u00ean c\u1ea1nh b\u00e0i t\u1ef1 vi\u1ebft, t\u00f4i c\u0169ng d\u1ecbch nhi\u1ec1u n\u1ed9i dung th\u00fa v\u1ecb c\u1ee7a c\u00e1c t\u00e1c gi\u1ea3 kh\u00e1c nhau. FB c\u00e1 nh\u00e2n: facebook.com\/anhducnguyen87. Email li\u00ean h\u1ec7: guiemailchotoi@gmail.com","sameAs":["https:\/\/www.facebook.com\/anhducnguyen87\/"],"url":"https:\/\/kiencang.net\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14527"}],"collection":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/comments?post=14527"}],"version-history":[{"count":0,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/posts\/14527\/revisions"}],"wp:attachment":[{"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/media?parent=14527"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/categories?post=14527"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kiencang.net\/wp-json\/wp\/v2\/tags?post=14527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}