?? ??? ???? CSS?? ??? ???? ?? ? ? ????. ?? ???? ??? Flexbox? ???? ????. 1. Flexbox ?? : ????? ????? ???? : Flex ? ?? ??? ?? : ??, ?? ???? ?? ?? ? ? ????. 2. ?? ???? ? ??? ?? : ?? ? ??? ?? ? ?? ?? (-50%, -50%)? ???? ??? ?????? ?? ???? ??? ??; 3. CSS ??? : ?????? ?? : ??? ? ?? ?? : ??, ?? ? ?? ???? ??? ?? ? ? ????. ?? ???? ??? ?? Align-Atems : Center? ??????. ??? ??? ?? ????? ???? ?? ??????.

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

Flexbox? ?? ??? ?????

Flexbox? ???? ?? ???? ?? ?? ?? ???? ?????. display: flex , ??? align-items: center ??????. ??? ???? ??? ??? ???? ???????.

?? ??:

 .Container {
  ????? : Flex;
  ?? ?? : ??;
  ?? : 100px;
}

??? ??? ???? ???? ???? ??? ??, NAV ?? ?? ?? ?? ??? ?? ??? ?????.

???? ? ? ?? : ??? ???? ??? ?? ??? ??? ??? ???? ?? ??? ???? ??? ???? ?? ??? ???? ??? ??????.

????? ?? ????

????? ?? ? ??? ??? ??? Flexbox? ?? ????? ????. ? ?? ???? ???? position: absolute (?? fixed )? CSS ??.

??? ??? ????.

 .centered {
  ?? : ??;
  ?? : 50%;
  ?? : 50%;
  ?? : ?? (-50%, -50%);
}

? ??? ??? ??? ??? 50% ??? ????? ?? ? ?? ??? ?? ???? ?? ??? ??? ???? ???? ???? ????? ???????.

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

???? ? ?? ??? ???? ?????

CSS Grid?? ???? ?? ???? ? ??? ?? ??? ???? ????. ????? display: grid ?? place-items: center ???? ? ?? ?? ? ?? ??? ?? ?? ? ????.

 .Container {
  ????? : ???;
  ?? ?? : ??;
  ?? : 200px;
}

??? ?? ????? ???? ???? ?? Flexbox? ?? ?????. ???? ?? ???? ?? ? ?? ???? ????? ???? ???? ?????.

place-items ?? ? ??? ?? ????? ?? ?? ? ???? ?? align-items: center ?????.

??? ? ????? ?? ?? ?? ????? ???? ?? ?? ?? ??? ??? ?? ??? ??? ?? ????? ?? ?????. ???? ?? ?? ? ???? ?? ?? ??? ?? Flexbox ?? ???? ????? ??? ?????.

????? ?? ??.

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