CSS (3) for horizontal vertical centering

Method One:

 div  { position :  absolute ; /*  position:fixed can also  */  left :  0 ;  right :  0 ;  top :  0 ;  bottom :  0 ;  width :  100px ;  height :  100px ;  margin :  auto ;  Background-color :  green ;} 

< Div ></ Div >

Method Two:

 div  { position :  absolute ; /*  position:fixed can also  */  left :  50% ;  top :  50% ;  width :  100px ;  height :  100px ;  Margin-left :  -50px ;  Margin-top :  -50px ;  Background-color :  red ;} 

< Div ></ Div >

Method Three:

 div  { position :  absolute ; /*  position:fixed can also  */  left :  50% ;  top :  50% ;  width :  100px ;  height :  100px ;  Transform :  translate ( -50%,-50%) ;  Background-color :  green ;} 

< Div ></ Div >

Method Four:

 body  { display :  Flex ;  justify-content :  center ; /*   */  Align-items :  center ; /*   */} div  { width :  100px ;  height :  100px ;  Background-color :  green ;} 

< Div ></ Div >

Method Five:

Div {    position: absolute;     Left: Calc ((100%-100px)/2);     top: Calc ((100%-100px)/2);     width: 100px;     height: 100px;     background-color: red;}

< Div ></ Div >

Method Six:

. Table{Display:Table;/*This element is displayed as a block-level table (similar to <table>) with line breaks before and after the table*/width:100%;Height:100%; }. OK{Display:Table-cell;/*This element is displayed as a table cell (similar to <td> and <th>)*/text-align:Center;/*Center Horizontally*/vertical-align:Middle;/*Center Vertically*/}. Innerbox{Display:Inline-block;width:100px;Height:100px;Background-color:Red;}

<class= ' table '>    <class= ' Ok '>        <class= ' Innerbox '></  div>    </div></Div  >

CSS (3) for horizontal vertical centering