Ի՞նչ տարբերակներ կան CSS-ում տարրերը կենտրոնացնելու և երբ է լավ օգտագործել յուրաքանչյուրն այնպիսի՞ն։

CSS-ում տարրերի կենտրոնացման համար կարելի է օգտագործել մի քանի մոտեցումներ, որոնց ընտրությունը կախված է կոնտեքստից՝ տարրի տեսակից (գծային կամ բլոկային), անհրաժեշտությունից հաշվի առնել բովանդակությունը, փաստաթղթի հոսքի տեղադրումը և պահանջվող ադապտացիան։

1. Գծային տարրերի համար: Օգտագործվում է հատկությունը text-align: center; ծնողական բլոկում։

   • Երբ օգտագործել: Երբ անհրաժեշտ է կենտրոնացնել տեքստը, պատկերները կամ այլ գծային կամ inline-block տարրերը բլոկային կոնտեյներով։

   • Օրինակ:

     .container {
       text-align: center; /* Կենտրոնացում գծային տարրերի ներսում */
     }
     

2. Inline-block տարրերի համար: Նույնպես հարմար է text-align: center; ծնողական բլոկում։

   • Երբ օգտագործել: Դրանից նման գծային տարրերի դեպքում, երբ անհրաժեշտ է կենտրոնացնել այն բլոկները, որոնք վարքագիծ ունեն որպես տողեր (օրինակ, կոճակներ, պատկերակներ, ցանկեր display: inline-block;):

3. Բլոկային տարրերի համար:

   • margin: auto;-ով: Կիրառվում է հենց բլոկային տարրին։ Պահանջում է որոշել տարրի լայնությունը (չի կարելի կենտրոնացնել բլոկային տարր width: auto;-ով այս մեթոդով):

     • Երբ օգտագործել: Ամենահեշտ և տարածված միջոցը հորիզոնական կենտրոնացման համար՝ սահմանված կամ առավելագույն լայնությամբ բլոկային տարրերը իրենց ծնողական կոնտեյներով։

     • Օրինակ:

       .centered-block {
         width: 50%; /* կամ ֆիքսված լայնություն, օրինակ 300px */
         margin: 0 auto; /* հորիզոնական կենտրոնացում */
       }
       

   • Flexbox-ով: Հնարավոր է ինչպես հորիզոնական, այնպես էլ ուղղահայաց կենտրոնացում։

     • Երբ օգտագործել: Երբ աշխատում եք դիզայնների հետ, որտեղ անհրաժեշտ է ճկունորեն դասավորել և տարածել տարրերը կոնտեյների ներսում։

     • Օրինակ: (միջնորդային տարրին կենտրոնացնելը ծնողականի մեջ)

       .container {
         display: flex;
         justify-content: center; /* հորիզոնական կենտրոնացում */
         align-items: center; /* ուղղահայաց կենտրոնացում */
         height: 100vh; /* օրինակ, սահմանել կոնտեյների բարձրությունը */
       }
       

   • Grid Layout-ով: Նույնպես առաջարկում է հզոր հնարավորություններ երկու ուղղություններով կենտրոնացման համար։

     • Երբ օգտագործել: Երբ անհրաժեշտ է ավելի բարդ երկուաչափական դիզայն կամ երբ պետք է կենտրոնացնել տարր ցանցի որոշակի բջիջում։

     • Օրինակ: (ցանցային բջիջում տարր կենտրոնացնել)

       .container {
         display: grid;
         place-items: center; /* կրճատում է align-items և justify-items */
         height: 100vh;
       }
       

4. Ուղղահայաց կենտրոնացում (հավելյալ մեթոդներ բլոկային տարրերի համար):

   • Ապակային դիրքավորումը և transform-ը օգտագործելով: Տարրը դիրքավորվում է անբաժանելի, տեղափոխվում է 50% վերևից և ձախից, ապա ուղղվում է իր լայնության և բարձրության կեսով transform-ով։ Պահանջվում է position: relative; ծնողական տարրում։

     • Երբ օգտագործել: Երբ անհրաժեշտ է տարր տեղադրել մյուսի վրա կամ երբ մյուս մեթոդները չեն հարմար, օրինակ, մոդալ պատուհաններ, պոպ-ապացույցներ։ Տարրը դուրս է գալիս սովորական հոսքից։

     • Օրինակ:

       .parent {
         position: relative; /* կարևոր է երեխային դիրքավորելու համար */
         height: 200px; /* օրինակ */
       }
       
       .child {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%); /* տեղափոխում է իր լայնության և բարձրության կեսով */
         width: 100px;
         height: 100px;
       }
       

   • line-height-ով: Հարմար է միայն մեկ տող տեքստի կենտրոնացման համար։ line-height-ը պետք է հավասար լինի բլոկի բարձրությանը։

     • Երբ օգտագործել: Պարզ դեպքերում, երբ անհրաժեշտ է ուղղահայաց հարմարեցնել մեկ տող տեքստը ֆիքսված բարձրության մեջ (օրինակ, կոճակներում կամ նշաններում)`

     • Օրինակ:

       .single-line {
         height: 50px;
         line-height: 50px; /* պետք է համընկնի height-ով */
       }
       

   • line-height-ով և ֆանտոմային տարրով vertical-align: Պսևդոելեմենտների :before կամ :after օգտագործում display: inline-block; և height: 100%;-ով, միասին vertical-align: middle;-ով՝ կենտրոնացված տարր։
     • Երբ օգտագործել: Փոքր տարածում, երբ Flexbox կամ Grid չեն հասանելի կամ չեն կիրառվում (օրինակ՝ հին բրաուզերների աջակցություն):

Ամփոփ աղյուսակ:

Մեթոդ	Հորիզոնական	Ուղղահայաց	Տեսակ տարրեր	Հատկություններ
text-align: center;	Այո	Ոչ	Վրիժառու, Inline-block	Ծնողական տարրում։
margin: auto;	Այո	Ոչ	Բլոկային (համապատասխան լայնությամբ)	Տարրում։ Պարզ և հուսալի։
Flexbox	Այո	Այո	Բլոկ, Flex տարրեր	Լիարժեք հարմարեցում, լավ է մեկ ուղղության կամ մեկ տարրի կենտրոնացման համար։
Grid Layout	Այո	Այո	Grid տարրեր	Ուժեղ, հարմար է բարդ երկուաչափական դիզայնների և բջիջում կենտրոնացման համար։
Ապակային դիրքավորում + transform	Այո	Այո	Ամեն ինչ	Տարրից դուրս է գալիս հոսքից։ Հարմար է շերտավորելու համար։
line-height	Ոչ	Այո	Միայն տողային տեքստ	Միայն մեկ տող, պահանջում է ֆիքսված բարձրություն։
Ֆանտոմային տարր + vertical-align	Ոչ	Այո	Տարբեր	Փոքր տարածում, կարող է օգտակար լինել համատեղելիության համար։

Ընտրությունը կախված է կոնկրետ առաջադրանքից։ Ժամանակակից զարգացումների մեջ, Flexbox և Grid լավագույնն են բլոկային տարրերի կենտրոնացման համար՝ իրենց ճկունության և երկու ուղղություններով հարմարեցման հնարավորությունների պատճառով։ margin: auto; մնում է հարմարեցման ստանդարտ մեթոդը։ text-align: center; օգտագործվում է գծային տարրերի համար։