2024年04月08日 懒猪 前端开发 前端博客 个人博客 网站制作 鹏仔先生 百变鹏仔 HTML CSS javascript JS 共享博客
一、定宽高元素在屏幕窗口水平垂直都居中,方法如下:
元素{ position: fixed; left: 50%; top: 50%; /*负值+宽的一半+单位*/ margin-left: -width/2+px; /*负值+高的一半+单位*/ margin-top: -height/2+px; }
二、不定宽高元素在屏幕窗口水平垂直都居中,方法如下(此方法需要满足自身包含尺寸的元素,例如图片等):
元素{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
三、不定宽高元素在父元素中水平垂直都居中,方法如下:
方案一:
父元素{ position: relative; } 子元素{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
方法二:
父元素{ display: table-cell; text-align: center; vertical-align: middle; } /*注:display:table-cell;是将元素转化为表格单元格形式*/
四、定宽高元素在父元素中水平垂直都居中,方法如下:
父元素{ position: relative; } 子元素{ position: absolute; left: 50%; top: 50%; margin-left: -width/2+px; margin-top: -height/2+px; }
本文链接:http://so.lmcjl.com/news/1472/