怎么让div垂直水平居中 (常见的办法）

上代码：

	         <div class="div1">
		  	  <div class="model"></div>
		  </div>

方法1：（margin:auto）

.model{
				width: 200px;
				height: 100px;
				border: 1px solid #000;
				position:absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				margin:auto;
	}

方法2：

  .model{
				width: 200px;
				height: 100px;
				border: 1px solid #000;
				position:absolute;
				top: 50%;
				left: 50%;
				margin-top:-50px;  (高的一半)
				margin-left: -50px;（宽的一半）
	  }

方法3 ：（transform）

  .model{
				width: 200px;
				height: 100px;
                              position:absolute;
               		left:50%;    /* 定位父级的50% */
              			top:50%;
            		       transform: translate(-50%,-50%);/*自己的50%*/
        }

方法4 :（flex布局）

.div1{
				height: 100vh; （父盒子需要给高度，vh意味viewport height，也就是可视窗口高度）
				display: flex;
             			 justify-content: center;
                		align-items: center;
  }
.model{
				width: 200px;
				height: 100px;
				border: 1px solid #000;
	   }

面试的时候没答上来，羞愧啊。