前端盒子居中显示方法,前端上下左右居中 |
您所在的位置:网站首页 › 前端盒子居中 › 前端盒子居中显示方法,前端上下左右居中 |
前端布局的时候总是会遇到一些需要居中的方案,下面是我平常使用的一些方法,当然还有很多的方法也能居中显示。1、宽高固定 – 使用绝对定位居中显示这儿一般是用在固定的大小的box中使用,如果相对定位的box大于屏幕不建议使用。代码如下: .box1{position:relative;height:500px;width:500px;background: #eee;margin:0 auto;}.box1 div{height:200px;width:200px;position:absolute;left:50%;top:50%;margin:-100px 0 0 -100px;background: #999;} 2、宽高固定 – 使用固定定位居中显示 固定定位主要是一些弹出层使用比较好,而且在所有的高度的文档中都可以使用。 代码如下: .box2{height:500px;width:500px;position:fixed;left:50%;top:50%;margin:-250px 0 0 -250px;background: #eee;} 3、宽高不固定 – 屏幕中间 – 使用jq来计算 有些时候咱们会遇到高度和宽度不固定的box需要居中的需求,这时候咱们可以使用js来计算box的宽高然后在控制他的margin来居中。 代码如下: .box3{position:fixed;left:50%;top:50%;width:600px;height:600px;background: #eee;padding:20px;}$('.box3').css({'margin-top':-$('.box3').outerHeight(true)/2+'px',//获取总高/2'margin-left':-$('.box3').outerWidth(true)/2+'px' //获取总宽/2}); 4、不固定宽高 – CSS上下左右居中 – IE7及以上 当然使用纯CSS也是可以办得到的,这个有个前提条件最外层的box必须有高度,然后可以使用display: table;来居中,如果你不想兼容低版本浏览器的话可以使用这个方法,当然这个方法亲测可以支持到IE7。 代码如下: (www.gendan5.com) 不固定宽高 - CSS上下左右居中 - IE7及以上 不固定宽高 - CSS上下左右居中 - IE7及以上 不固定宽高 - CSS上下左右居中 - IE7及以上 不固定宽高 - CSS上下左右居中 - IE7及以上 不固定宽高 - CSS上下左右居中 - IE7及以上 .box4{height:500px;width:500px;display: table;border-collapse: collapse;margin:0 auto;}.box4>div{display:table-cell;vertical-align:middle;text-align:center;}.box4>div>div{background:#eee;padding:20px;line-height:28px;display:inline-block;}5、上下左右定位法 – CSS上下左右居中 – IE7及以上 其实这个方法是我偶然发现的,当初还真是被惊到了 代码如下: .box5{position:fixed;top:20%;left:20%;bottom:20%;right:20%;background:#999;} |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |