[{"data":1,"prerenderedAt":962},["ShallowReactive",2],{"guide-flexbox-centering-complete-guide":3},{"id":4,"title":5,"body":6,"date":954,"description":955,"extension":956,"meta":957,"navigation":165,"path":958,"readingTime":169,"seo":959,"stem":960,"__hash__":961},"guides\u002Fguides\u002Fflexbox-centering-complete-guide.md","Flexbox Centering: Complete Guide",{"type":7,"value":8,"toc":930},"minimark",[9,14,34,38,43,100,109,113,124,202,206,210,246,252,256,310,313,317,320,378,381,385,433,460,464,470,537,549,553,559,621,624,628,632,637,735,739,746,776,780,790,794,875,879,913,917,926],[10,11,13],"h2",{"id":12},"the-centering-problem","The Centering Problem",[15,16,17,18,22,23,22,26,29,30,33],"p",{},"Centering elements in CSS has a notorious reputation. Before Flexbox, developers juggled ",[19,20,21],"code",{},"margin: auto",", ",[19,24,25],{},"text-align",[19,27,28],{},"line-height"," hacks, and absolute positioning with ",[19,31,32],{},"transform: translate",". Flexbox solves all of these cases with two properties. This guide covers every centering scenario Flexbox handles.",[10,35,37],{"id":36},"horizontal-centering","Horizontal Centering",[39,40,42],"h3",{"id":41},"inline-and-text-content","Inline and Text Content",[44,45,50],"pre",{"className":46,"code":47,"language":48,"meta":49,"style":49},"language-css shiki shiki-themes github-light github-dark",".container {\n  display: flex;\n  justify-content: center;\n}\n","css","",[19,51,52,65,81,94],{"__ignoreMap":49},[53,54,57,61],"span",{"class":55,"line":56},"line",1,[53,58,60],{"class":59},"sScJk",".container",[53,62,64],{"class":63},"sVt8B"," {\n",[53,66,68,72,75,78],{"class":55,"line":67},2,[53,69,71],{"class":70},"sj4cs","  display",[53,73,74],{"class":63},": ",[53,76,77],{"class":70},"flex",[53,79,80],{"class":63},";\n",[53,82,84,87,89,92],{"class":55,"line":83},3,[53,85,86],{"class":70},"  justify-content",[53,88,74],{"class":63},[53,90,91],{"class":70},"center",[53,93,80],{"class":63},[53,95,97],{"class":55,"line":96},4,[53,98,99],{"class":63},"}\n",[15,101,102,105,106,108],{},[19,103,104],{},"justify-content"," aligns items along the main axis (horizontal by default). Setting it to ",[19,107,91],{}," pushes all flex children to the center of the row.",[39,110,112],{"id":111},"block-level-elements","Block-Level Elements",[15,114,115,116,119,120,123],{},"The same rule applies — ",[19,117,118],{},"justify-content: center"," centers any flex child regardless of its display type. No ",[19,121,122],{},"margin: 0 auto"," needed.",[44,125,127],{"className":46,"code":126,"language":48,"meta":49,"style":49},".card-wrapper {\n  display: flex;\n  justify-content: center;\n}\n\n.card {\n  width: 400px; \u002F* Centers within the flex row *\u002F\n}\n",[19,128,129,136,146,156,160,167,175,197],{"__ignoreMap":49},[53,130,131,134],{"class":55,"line":56},[53,132,133],{"class":59},".card-wrapper",[53,135,64],{"class":63},[53,137,138,140,142,144],{"class":55,"line":67},[53,139,71],{"class":70},[53,141,74],{"class":63},[53,143,77],{"class":70},[53,145,80],{"class":63},[53,147,148,150,152,154],{"class":55,"line":83},[53,149,86],{"class":70},[53,151,74],{"class":63},[53,153,91],{"class":70},[53,155,80],{"class":63},[53,157,158],{"class":55,"line":96},[53,159,99],{"class":63},[53,161,163],{"class":55,"line":162},5,[53,164,166],{"emptyLinePlaceholder":165},true,"\n",[53,168,170,173],{"class":55,"line":169},6,[53,171,172],{"class":59},".card",[53,174,64],{"class":63},[53,176,178,181,183,186,190,193],{"class":55,"line":177},7,[53,179,180],{"class":70},"  width",[53,182,74],{"class":63},[53,184,185],{"class":70},"400",[53,187,189],{"class":188},"szBVR","px",[53,191,192],{"class":63},"; ",[53,194,196],{"class":195},"sJ8bj","\u002F* Centers within the flex row *\u002F\n",[53,198,200],{"class":55,"line":199},8,[53,201,99],{"class":63},[10,203,205],{"id":204},"vertical-centering","Vertical Centering",[39,207,209],{"id":208},"single-line-of-text","Single Line of Text",[44,211,213],{"className":46,"code":212,"language":48,"meta":49,"style":49},".container {\n  display: flex;\n  align-items: center;\n}\n",[19,214,215,221,231,242],{"__ignoreMap":49},[53,216,217,219],{"class":55,"line":56},[53,218,60],{"class":59},[53,220,64],{"class":63},[53,222,223,225,227,229],{"class":55,"line":67},[53,224,71],{"class":70},[53,226,74],{"class":63},[53,228,77],{"class":70},[53,230,80],{"class":63},[53,232,233,236,238,240],{"class":55,"line":83},[53,234,235],{"class":70},"  align-items",[53,237,74],{"class":63},[53,239,91],{"class":70},[53,241,80],{"class":63},[53,243,244],{"class":55,"line":96},[53,245,99],{"class":63},[15,247,248,251],{},[19,249,250],{},"align-items"," controls the cross axis (vertical by default). This centers flex children vertically within the container.",[39,253,255],{"id":254},"full-height-vertical-center","Full-Height Vertical Center",[44,257,259],{"className":46,"code":258,"language":48,"meta":49,"style":49},".hero {\n  display: flex;\n  align-items: center;\n  min-height: 100vh; \u002F* Needs a defined height *\u002F\n}\n",[19,260,261,268,278,288,306],{"__ignoreMap":49},[53,262,263,266],{"class":55,"line":56},[53,264,265],{"class":59},".hero",[53,267,64],{"class":63},[53,269,270,272,274,276],{"class":55,"line":67},[53,271,71],{"class":70},[53,273,74],{"class":63},[53,275,77],{"class":70},[53,277,80],{"class":63},[53,279,280,282,284,286],{"class":55,"line":83},[53,281,235],{"class":70},[53,283,74],{"class":63},[53,285,91],{"class":70},[53,287,80],{"class":63},[53,289,290,293,295,298,301,303],{"class":55,"line":96},[53,291,292],{"class":70},"  min-height",[53,294,74],{"class":63},[53,296,297],{"class":70},"100",[53,299,300],{"class":188},"vh",[53,302,192],{"class":63},[53,304,305],{"class":195},"\u002F* Needs a defined height *\u002F\n",[53,307,308],{"class":55,"line":162},[53,309,99],{"class":63},[15,311,312],{},"Vertical centering requires the container to have a height. Without it, the container shrinks to fit content and there is nothing to center within.",[10,314,316],{"id":315},"both-axes-at-once","Both Axes at Once",[15,318,319],{},"The classic full center — horizontal and vertical — requires both properties:",[44,321,323],{"className":46,"code":322,"language":48,"meta":49,"style":49},".center-both {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  min-height: 100vh;\n}\n",[19,324,325,332,342,352,362,374],{"__ignoreMap":49},[53,326,327,330],{"class":55,"line":56},[53,328,329],{"class":59},".center-both",[53,331,64],{"class":63},[53,333,334,336,338,340],{"class":55,"line":67},[53,335,71],{"class":70},[53,337,74],{"class":63},[53,339,77],{"class":70},[53,341,80],{"class":63},[53,343,344,346,348,350],{"class":55,"line":83},[53,345,86],{"class":70},[53,347,74],{"class":63},[53,349,91],{"class":70},[53,351,80],{"class":63},[53,353,354,356,358,360],{"class":55,"line":96},[53,355,235],{"class":70},[53,357,74],{"class":63},[53,359,91],{"class":70},[53,361,80],{"class":63},[53,363,364,366,368,370,372],{"class":55,"line":162},[53,365,292],{"class":70},[53,367,74],{"class":63},[53,369,297],{"class":70},[53,371,300],{"class":188},[53,373,80],{"class":63},[53,375,376],{"class":55,"line":169},[53,377,99],{"class":63},[15,379,380],{},"This is the most common centering pattern. Modal overlays, hero sections,, and empty states all use it.",[39,382,384],{"id":383},"shorthand-with-place-items","Shorthand With place-items",[44,386,388],{"className":46,"code":387,"language":48,"meta":49,"style":49},".center-both {\n  display: flex;\n  place-items: center;\n  min-height: 100vh;\n}\n",[19,389,390,396,406,417,429],{"__ignoreMap":49},[53,391,392,394],{"class":55,"line":56},[53,393,329],{"class":59},[53,395,64],{"class":63},[53,397,398,400,402,404],{"class":55,"line":67},[53,399,71],{"class":70},[53,401,74],{"class":63},[53,403,77],{"class":70},[53,405,80],{"class":63},[53,407,408,411,413,415],{"class":55,"line":83},[53,409,410],{"class":70},"  place-items",[53,412,74],{"class":63},[53,414,91],{"class":70},[53,416,80],{"class":63},[53,418,419,421,423,425,427],{"class":55,"line":96},[53,420,292],{"class":70},[53,422,74],{"class":63},[53,424,297],{"class":70},[53,426,300],{"class":188},[53,428,80],{"class":63},[53,430,431],{"class":55,"line":162},[53,432,99],{"class":63},[15,434,435,438,439,441,442,445,446,448,449,452,453,456,457,459],{},[19,436,437],{},"place-items"," sets both ",[19,440,250],{}," and ",[19,443,444],{},"justify-items",". In Flexbox, ",[19,447,444],{}," is ignored on the container, but ",[19,450,451],{},"place-items: center"," effectively sets ",[19,454,455],{},"align-items: center"," — and combined with ",[19,458,118],{},", achieves the same result. Most developers still prefer the explicit two-property version for clarity.",[10,461,463],{"id":462},"centering-a-single-item-with-margin-auto","Centering a Single Item With margin: auto",[15,465,466,467,469],{},"When a flex container has only one child to center, ",[19,468,21],{}," on the child works:",[44,471,473],{"className":46,"code":472,"language":48,"meta":49,"style":49},".container {\n  display: flex;\n  min-height: 100vh;\n}\n\n.modal {\n  margin: auto; \u002F* Centers on both axes *\u002F\n}\n",[19,474,475,481,491,503,507,511,518,533],{"__ignoreMap":49},[53,476,477,479],{"class":55,"line":56},[53,478,60],{"class":59},[53,480,64],{"class":63},[53,482,483,485,487,489],{"class":55,"line":67},[53,484,71],{"class":70},[53,486,74],{"class":63},[53,488,77],{"class":70},[53,490,80],{"class":63},[53,492,493,495,497,499,501],{"class":55,"line":83},[53,494,292],{"class":70},[53,496,74],{"class":63},[53,498,297],{"class":70},[53,500,300],{"class":188},[53,502,80],{"class":63},[53,504,505],{"class":55,"line":96},[53,506,99],{"class":63},[53,508,509],{"class":55,"line":162},[53,510,166],{"emptyLinePlaceholder":165},[53,512,513,516],{"class":55,"line":169},[53,514,515],{"class":59},".modal",[53,517,64],{"class":63},[53,519,520,523,525,528,530],{"class":55,"line":177},[53,521,522],{"class":70},"  margin",[53,524,74],{"class":63},[53,526,527],{"class":70},"auto",[53,529,192],{"class":63},[53,531,532],{"class":195},"\u002F* Centers on both axes *\u002F\n",[53,534,535],{"class":55,"line":199},[53,536,99],{"class":63},[15,538,539,540,542,543,545,546,548],{},"Flexbox distributes free space evenly when a child has ",[19,541,21],{}," in a flex direction. This technique is useful when you cannot modify the container's ",[19,544,104],{}," or ",[19,547,250],{}," — for example, when sibling items should not be centered.",[10,550,552],{"id":551},"centering-wrapped-content","Centering Wrapped Content",[15,554,555,556,558],{},"When flex items wrap, ",[19,557,118],{}," centers each row as a group:",[44,560,562],{"className":46,"code":561,"language":48,"meta":49,"style":49},".tag-cloud {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 8px;\n}\n",[19,563,564,571,581,593,603,617],{"__ignoreMap":49},[53,565,566,569],{"class":55,"line":56},[53,567,568],{"class":59},".tag-cloud",[53,570,64],{"class":63},[53,572,573,575,577,579],{"class":55,"line":67},[53,574,71],{"class":70},[53,576,74],{"class":63},[53,578,77],{"class":70},[53,580,80],{"class":63},[53,582,583,586,588,591],{"class":55,"line":83},[53,584,585],{"class":70},"  flex-wrap",[53,587,74],{"class":63},[53,589,590],{"class":70},"wrap",[53,592,80],{"class":63},[53,594,595,597,599,601],{"class":55,"line":96},[53,596,86],{"class":70},[53,598,74],{"class":63},[53,600,91],{"class":70},[53,602,80],{"class":63},[53,604,605,608,610,613,615],{"class":55,"line":162},[53,606,607],{"class":70},"  gap",[53,609,74],{"class":63},[53,611,612],{"class":70},"8",[53,614,189],{"class":188},[53,616,80],{"class":63},[53,618,619],{"class":55,"line":169},[53,620,99],{"class":63},[15,622,623],{},"Items on each line are centered, and wrapped lines stack naturally. This produces a centered cloud effect common in tag lists and filter UIs.",[10,625,627],{"id":626},"common-pitfalls","Common Pitfalls",[39,629,631],{"id":630},"missing-container-height","Missing Container Height",[15,633,634,636],{},[19,635,455],{}," does nothing if the container has no explicit height. The container collapses to the content height, leaving zero free space to distribute.",[44,638,640],{"className":46,"code":639,"language":48,"meta":49,"style":49},"\u002F* Broken — no height to center within *\u002F\n.container {\n  display: flex;\n  align-items: center; \u002F* No effect *\u002F\n}\n\n\u002F* Fixed — explicit height *\u002F\n.container {\n  display: flex;\n  align-items: center;\n  min-height: 400px;\n}\n",[19,641,642,647,653,663,676,680,684,689,695,706,717,730],{"__ignoreMap":49},[53,643,644],{"class":55,"line":56},[53,645,646],{"class":195},"\u002F* Broken — no height to center within *\u002F\n",[53,648,649,651],{"class":55,"line":67},[53,650,60],{"class":59},[53,652,64],{"class":63},[53,654,655,657,659,661],{"class":55,"line":83},[53,656,71],{"class":70},[53,658,74],{"class":63},[53,660,77],{"class":70},[53,662,80],{"class":63},[53,664,665,667,669,671,673],{"class":55,"line":96},[53,666,235],{"class":70},[53,668,74],{"class":63},[53,670,91],{"class":70},[53,672,192],{"class":63},[53,674,675],{"class":195},"\u002F* No effect *\u002F\n",[53,677,678],{"class":55,"line":162},[53,679,99],{"class":63},[53,681,682],{"class":55,"line":169},[53,683,166],{"emptyLinePlaceholder":165},[53,685,686],{"class":55,"line":177},[53,687,688],{"class":195},"\u002F* Fixed — explicit height *\u002F\n",[53,690,691,693],{"class":55,"line":199},[53,692,60],{"class":59},[53,694,64],{"class":63},[53,696,698,700,702,704],{"class":55,"line":697},9,[53,699,71],{"class":70},[53,701,74],{"class":63},[53,703,77],{"class":70},[53,705,80],{"class":63},[53,707,709,711,713,715],{"class":55,"line":708},10,[53,710,235],{"class":70},[53,712,74],{"class":63},[53,714,91],{"class":70},[53,716,80],{"class":63},[53,718,720,722,724,726,728],{"class":55,"line":719},11,[53,721,292],{"class":70},[53,723,74],{"class":63},[53,725,185],{"class":70},[53,727,189],{"class":188},[53,729,80],{"class":63},[53,731,733],{"class":55,"line":732},12,[53,734,99],{"class":63},[39,736,738],{"id":737},"centering-vs-text-alignment","Centering vs. Text Alignment",[15,740,741,742,745],{},"Flexbox centers flex items, not text inside them. If you want text centered within a flex child, use ",[19,743,744],{},"text-align: center"," on the child:",[44,747,749],{"className":46,"code":748,"language":48,"meta":49,"style":49},".child {\n  text-align: center; \u002F* Centers inline text *\u002F\n}\n",[19,750,751,758,772],{"__ignoreMap":49},[53,752,753,756],{"class":55,"line":56},[53,754,755],{"class":59},".child",[53,757,64],{"class":63},[53,759,760,763,765,767,769],{"class":55,"line":67},[53,761,762],{"class":70},"  text-align",[53,764,74],{"class":63},[53,766,91],{"class":70},[53,768,192],{"class":63},[53,770,771],{"class":195},"\u002F* Centers inline text *\u002F\n",[53,773,774],{"class":55,"line":83},[53,775,99],{"class":63},[39,777,779],{"id":778},"unequal-item-sizes","Unequal Item Sizes",[15,781,782,783,785,786,789],{},"When flexchildren have different widths, ",[19,784,118],{}," centers the group, but the visual center may not align with a specific child. Use ",[19,787,788],{},"align-self: center"," on individual children for per-item vertical adjustment.",[10,791,793],{"id":792},"quick-reference","Quick Reference",[795,796,797,810],"table",{},[798,799,800],"thead",{},[801,802,803,807],"tr",{},[804,805,806],"th",{},"Goal",[804,808,809],{},"CSS",[811,812,813,823,832,844,854,866],"tbody",{},[801,814,815,819],{},[816,817,818],"td",{},"Center horizontally",[816,820,821],{},[19,822,118],{},[801,824,825,828],{},[816,826,827],{},"Center vertically",[816,829,830],{},[19,831,455],{},[801,833,834,837],{},[816,835,836],{},"Center both axes",[816,838,839,841,842],{},[19,840,118],{}," + ",[19,843,455],{},[801,845,846,849],{},[816,847,848],{},"Center single child",[816,850,851,853],{},[19,852,21],{}," on the child",[801,855,856,859],{},[816,857,858],{},"Center wrapped rows",[816,860,861,841,864],{},[19,862,863],{},"flex-wrap: wrap",[19,865,118],{},[801,867,868,871],{},[816,869,870],{},"Center text inside child",[816,872,873,853],{},[19,874,744],{},[10,876,878],{"id":877},"key-takeaways","Key Takeaways",[880,881,882,888,893,896,901,907],"ul",{},[883,884,885,887],"li",{},[19,886,118],{}," handles horizontal centering on the main axis.",[883,889,890,892],{},[19,891,455],{}," handles vertical centering on the cross axis.",[883,894,895],{},"Vertical centering requires a defined container height.",[883,897,898,900],{},[19,899,21],{}," on a flex child centers it on both axes without touching the container.",[883,902,903,904,906],{},"Flexbox centers flex items, not text — use ",[19,905,744],{}," for inline content.",[883,908,909,910,912],{},"For wrapped layouts, ",[19,911,118],{}," centers each row as a group.",[10,914,916],{"id":915},"try-it-yourself","Try It Yourself",[15,918,919,920,925],{},"Build and preview centered layouts interactively with the ",[921,922,924],"a",{"href":923},"\u002Ftools\u002Fflexbox-generator","Flexbox Generator",".",[927,928,929],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":49,"searchDepth":67,"depth":67,"links":931},[932,933,937,941,944,945,946,951,952,953],{"id":12,"depth":67,"text":13},{"id":36,"depth":67,"text":37,"children":934},[935,936],{"id":41,"depth":83,"text":42},{"id":111,"depth":83,"text":112},{"id":204,"depth":67,"text":205,"children":938},[939,940],{"id":208,"depth":83,"text":209},{"id":254,"depth":83,"text":255},{"id":315,"depth":67,"text":316,"children":942},[943],{"id":383,"depth":83,"text":384},{"id":462,"depth":67,"text":463},{"id":551,"depth":67,"text":552},{"id":626,"depth":67,"text":627,"children":947},[948,949,950],{"id":630,"depth":83,"text":631},{"id":737,"depth":83,"text":738},{"id":778,"depth":83,"text":779},{"id":792,"depth":67,"text":793},{"id":877,"depth":67,"text":878},{"id":915,"depth":67,"text":916},"2026-05-28","Every way to center content with Flexbox — horizontally, vertically, and both at once.","md",{"immutable":165},"\u002Fguides\u002Fflexbox-centering-complete-guide",{"title":5,"description":955},"guides\u002Fflexbox-centering-complete-guide","i52yvG077tuRvb0WTLaTXmWquy1ZapcWcKPhV3621Uo",1780401333888]