一、定宽高元素在屏幕窗口水平垂直都居中,方法如下:fEB胜于蓝|优秀个人博客
fEB胜于蓝|优秀个人博客
元素{
position: fixed;
left: 50%;
top: 50%;
/*负值+宽的一半+单位*/
margin-left: -width/2+px;
/*负值+高的一半+单位*/
margin-top: -height/2+px;
}
二、不定宽高元素在屏幕窗口水平垂直都居中,方法如下:fEB胜于蓝|优秀个人博客
fEB胜于蓝|优秀个人博客
元素{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
三、不定宽高元素在父元素中水平垂直都居中,方法如下:fEB胜于蓝|优秀个人博客
方案一:fEB胜于蓝|优秀个人博客
fEB胜于蓝|优秀个人博客
父元素{
position: relative;
}
子元素{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
方法二:fEB胜于蓝|优秀个人博客
fEB胜于蓝|优秀个人博客
父元素{
display: table-cell;
text-align: center;
vertical-align: middle;
}
/*注:display:table-cell;是将元素转化为表格单元格形式*/
四、定宽高元素在父元素中水平垂直都居中,方法如下:fEB胜于蓝|优秀个人博客
fEB胜于蓝|优秀个人博客
父元素{
position: relative;
}
子元素{
position: absolute;
left: 50%;
top: 50%;
margin-left: -width/2+px;
margin-top: -height/2+px;
Tags:
转载:【免责声明】:转载自其他平台或媒体的文章,本站将注明来源及作者,但不对所包含内容的准确性、可靠性或网站性提供任何明示或暗示的保证,仅做参考!如有侵权,请联系本站并提供相关证明,本站将依据著作权人意见删除该文,并不承担任何责任!
如果您认为本文侵犯了您的版权信息,请与我们联系修正或删除。感谢您对胜于蓝个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源胜于蓝个人博客”。/web/html/87.html
本文地址:/web/html/87.html