css，div水平垂直居中问题

面试中经常被问到的一个css基础题，如何使一个div水平垂直居中，并且让用好几种不同的方法实现

一、未知宽高

法1、

<div class="box">div1</div>
.box{
      position: fixed;
	  top:0;
	  right:0;
	  bottom:0;
	  left:0;
	  margin:auto;
	  background:#d00;
 }

法2、

<div class="box">div1</div>
.box{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background:#d00;
}

法3、

 <div class="box">
   <div class="content"> </div>
 </div>

.box {
     background: #FF8C00;
      width: 300px;
      height: 300px;
      display: flex;
      justify-content: center;
      align-items: center;
 }
.content {
      background: #F00;
      width: 100px;
      height: 100px;
 }

法4、

 <div class="box">
   <div class="content"> </div>
 </div>
.box {
	   background:#d00;
	   width: 1000px;
	   height: 200px;
	   display:table-cell;
	   vertical-align:middle;
	   text-align:center;
 }
 .content{
		   color: white;
		   background: blue;
		   display:inline-block;
 }