CSS3 center method (vertical- horizontal)

METHOD-1	METHOD-2	METHOD-3
display:FLEX	transform:TRANSLATE	display:TABLE-CELL
#outter{     display: flex;     flex-direction: column;     justify-content: center;     align-items: center;     border: 1px solid ;     background: #eee;     height: 100%;     width: 100%;     position:absolute; }	#outter {   width: 100%;   margin: 0 auto;   padding: 20px;   resize: both;   overflow: auto; }	#outter{     display: table;     position: absolute;      height: 100%;      width: 100%;     border:1px solid #00f; }
	#inner {   position: absolute;   width: 200px;   height:100px;   transform: translate(-50%, -50%);   position: absolute;   top: 50%;   left: 50%;   padding: 20px;   resize: both;   overflow: auto; }	#inner{     margin-left: auto;      margin-right: auto;     width:200px;     height:100px;     border:1px solid #f00 }
		#middle{     display: table-cell;     vertical-align: middle;   border:1px solid #0f0 }

***METHOD-1 display:FLEX method**/
/* #outter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    background-color: #eee;
    height: 100%;
    width: 100%;
    position:absolute;
} */

***METHOD-2 display:TABLE-CELL method**/
/* #outter{
    display: table; position: absolute; height: 100%; width: 100%;
    border:1px solid #00f;

}
#middle{
    display: table-cell; vertical-align: middle;
  border:1px solid #0f0
}
#inner{
    margin-left: auto; margin-right: auto;
    width:200px;
    height:100px;
    border:1px solid #f00
}

 */

***METHOD-3 transform:TRANSLATE method**/
#outter {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  resize: both;
  overflow: auto;
}
#inner {
  position: absolute;
  width: 200px;
  height:100px;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 20px;
  resize: both;
  overflow: auto;
}


HTML code

<div id="outter">
    <div id="middle">
          <div id="inner">Inner</div>
        Middle
    </div>
</div>