CSS? ???? ??? ?? ??? ??? ??????

CSS?? ???? ?????? ?? ???? ??, ?? ?? ? ?? ?????? ??? ?? ?? ?? ???? ?? ? ? ????. ? ?? ???? ??? ??? ????.

1. ?? ???? text-align ?? :
   ???? ??? ?? ??? ?? ?? (????? ???? ??) ? ?? ????? text-align ??? ???? ???? ???? ?? ???? center ? ?? ? ? ????.

    <code class="css">.container { text-align: center; }</code>

2. ?? ?????? margin ?? :
   ???? ?? ?? ?? ? ?? ( display: block ????) ?? ? ??? ??? auto ?? ???? ???? ??? ??? ?? ? ????.

    <code class="css">img { display: block; margin-left: auto; margin-right: auto; }</code>

3. ?? ? ?? ??? ??? Flexbox ?? :
   ????? Flexbox? ???? ?? ? ???? ???? ??? ?? ? ????. ???? display: flex ? justify-content ? align-items ??? ???? ???? ??? ????.

    <code class="css">.container { display: flex; justify-content: center; align-items: center; }</code>

CSS? ???? ???? ?? ?? ??? ???? ???? ??? ??????

???? ??? ?? ??? ???? ????? ????? ??? ??? CSS ??? ???? ?? ?????. ????? ???? ? ?? ?????.

1. ?? ?? ?? :
   ?? ( px )? ?? ?? ?? ?? ??? ( % ) ?? ??? ?? ( vw , vh )? ?? ?? ??? ??????. ?? ?? ???? ? ???? ??? ?? ????.

2. ?????? ??? ?? :
   Viewport ??? ???? ??? ??? ?? ? ? ???? ???? ?? ? ? ????. ?? ?? vw ??? ?? calc ???? ???? ??? ??? ? ????.

    <code class="css">img { position: absolute; left: calc(50vw - 50%); top: calc(50vh - 50%); transform: translate(-50%, -50%); }</code>

3. ??? ?? :
   ??? ??? ???? ??? ?? ??? ?? ???? ??? ? ????. ?? ?? ??? ???? ??? ??? ?? ?? ?? ? ? ????.

    <code class="css">@media (max-width: 768px) { .container { width: 100%; text-align: center; } }</code>

4. Flexbox ?? ??? :
   ??? ????? Flexbox ?? CSS ???? ???? ???? ???? ??? ? ??? ????? ??? ??? ?? ?? ??? ? ?????.

CSS?? ???? ?? ? ???? ??? ?????? ?? ??? ??????

??? CSS ??? ?? ???? ?? ? ???? ???? ?? ? ? ????. ??? ? ?? ???? ?????.

1. Flexbox :
   Flexbox? ???? ???? ?? ? ???? ???? ???? ?? ??? ?? ? ?????.

    <code class="css">.container { display: flex; justify-content: center; align-items: center; }</code>

2. ???:
   CSS Grid? ???? ???? ?? ??? ??? ??? ?????.

    <code class="css">.container { display: grid; place-items: center; }</code>

3. ??? ?? ?? ???? :
   ? ???? ???? position: absolute ?? transform ???? ???? ???? ?????.

    <code class="css">.container { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</code>

4. ??? ? :
   ??? ? ????? ????? display: table-cell ???? ???? ??? ???? ??? ?? ????.

    <code class="css">.container { display: table-cell; vertical-align: middle; text-align: center; }</code>

CSS? ???? DIV ??? ???? ???? ? ? ????.

?, CSS? ???? ?? ??? ???? DIV ? ???? ???? ? ? ????. ????? ???? ? ?? ?????.

1. Flexbox ?? :
   Flexbox? DIV ??? ???? ?????? ?? ????? ??? ?? ? ?????.

    <code class="css">.div-container { display: flex; justify-content: center; align-items: center; }</code>

2. ??? ?? :
   CSS Grid? Div ??? ???? ??? ?????? ? ?? ??? ?????.

    <code class="css">.div-container { display: grid; place-items: center; }</code>

3. ?? ???? ? ?? ?? :
   ? ??? ???? position: absolute ? transform ???? ??? ?????.

    <code class="css">.div-container { position: relative; } img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }</code>

4. ??? ?? ? ?? ?? ?? :
   ?? ???? text-align ??? ? ??? ?? ??? ?? ??? ??? ????? ??? vertical-align .

    <code class="css">.div-container { display: table-cell; text-align: center; vertical-align: middle; }</code>

? ???? ?? ? ??? ??? ?? ? ?? ???? ?? ?? ??? ?? ????? ?? ?? ??? ?? ??? ? ????.

? ??? CSS? ???? ??? ??? ???? ? ? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!