css不知父元素宽高时水平垂直居中

<div id="main" style="width:1000px;height:500px;background-color:#ff0;position:relative">
   <div id="d1" style="width:200px;height:200px;"></div>
</div>

css方式一：相对定位

#d1{
   border:1px solid #000;
   position:absolute;
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
 }

css方式二：弹性布局

#d1{
   width:200px;
   height: 200px;
   border:1px solid #000;
}
#main{ 
   display: flex;
   justify-content: center;
   align-items: center;
}

css方式三：display:table

#d1{
   width:200px;
   height: 200px;
   border:1px solid #000;
   margin: 0 auto;
}
 #main{
   display: table-cell;
   vertical-align: middle;
}