css horizontal vertical center problems

Horizontal Centers:

• Inline elements: text-align: center;
• Block-level elements: magin: 0 auto;
• Child element set: position: absolute; left: 50%; transform: translateX (-50%);
• The parent element is provided: display: flex; justify-content: center;

 

Vertical center:

• line-height:height;
• Child element set: position: absolute; top: 50%; transform: translateY (-50%);
• The parent element is provided: display: flex; align-items: center;

Horizontal and vertical center:

• display:flex; justify-content:center; align-items:center;
• .parent{position:relative; }   .children{position:absolute; width:200px; height:100px; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}
• .parent{position:relative;}     .children{position:absolute; width:200px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%)}
• .parent{position:relative;}  .children{position:absolute; top:0; bottom:0; left:0; right:0;   margin:auto;}