一个div元素在父元素中上下左右居中的方法有哪些？

实现一个div子元素(.innerbox)在父元素(.outerbox)中上下左右居中的方法有哪些？

.outerbox{height:300px;width:300px;border:1px solid red;margin:100px auto;position:relative;} /* 父元素*/

.innerbox{                                   /* 子元素 */

height:100px;width:100px;background:yellow;

/* 方法一 */

position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;

/* 方法二 */

position:absolute;left:50%;top:50%;margin-left:-50px;margin-top:-50px;

/* 方法三 */

position:absolute;left:50%;top:50%;transform:translate(-50px,-50px);

}

 

/* 方法四 */

.outerbox{height:300px;width:300px;border:1px solid red;margin:100px auto;        /* 父元素 */

display:flex;justify-content:center;align-items:center;}

.innerbox{height:100px;width:100px;background:red;}        /* 子元素 */