第一种方案：框内是div块的情况
div.myid{
display:flex;
justify-content:center;
align-items:center;
height:500px;
}
div.myid div.mydiv{
width:200px;
height:200px;
border:1px solid red;
}
低版本的浏览器的兼容性不够好，选择要慎重，
第二种方案：使框内div居中，使用定位的方式；
div.myid{
height:500px;
position:relative;
}
div.myid div.mydiv{
width:200px;
height:200px;
border:1px solid red;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
第三种使用定位的方法：利用上下左右为0，然后margin：auto;绝对居中
div.myid{
width:500px;
height:500px;
position:relative;
border:1px solid #333;
}
div.myid div.kg{
}
div.myid div.mydiv{
width:200px;
height:200px;
border:1px solid red;
line-height:40px;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
最后一种方案是使用父元素display:table; 子元素：display:table-cell;vertical-align:middle; 这个方法我不太喜欢，所以先不收集，要用的时候百度就出来一大堆；
对了，再就是文字元素绝对居中那就是使用：line-height:40px;(父元素的高) text-align:center;