第一种方案:框内是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;