请选择 进入手机版 | 继续访问电脑版

10模板

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 423|回复: 0

垂直水平都居中的弹层的几种方法

[复制链接]

1288

主题

1801

帖子

4609

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4609
发表于 2017-5-20 11:35:07 | 显示全部楼层 |阅读模式
1.弹层宽高确定的情况(width、height 100px)
第一种实现(最常见):


  1. <div class="layer"></div>
  2. .layer {
  3.     position: fixed;
  4.     top: 50%;
  5.     left: 50%;
  6.     margin-left: -50px;  //宽度的一半
  7.     margin-top: -50px;   //高度的一半
  8. }
复制代码
第二种实现:利用margin


  1. <div class="layer"></div>
  2. .layer {
  3.     position: fixed;
  4.     margin: auto;
  5.     top: 0;
  6.     left: 0;
  7.     bottom: 0;
  8.     right: 0;
  9. }
复制代码
2.弹层宽高不确定的情况
第三种实现:利用css3的translate可以改变元素自身的位置
  1. <div class="layer"></div>
  2. .layer {
  3.     position: fixed;
  4.     top: 50%;
  5.     left: 50%;
  6.     transform: translate3d(-50%,-50%,0);
  7. }
复制代码
以上3种方法中,推荐2,3,因为第一种一旦宽高改变还得修改css代码。
第3种方法是万能的,不用考虑宽高的问题,这个还可以解决好多居中的问题但是不兼容低版本浏览器
asdsadsa
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|10模板  

GMT+8, 2018-4-20 18:39 , Processed in 0.270252 second(s), 27 queries .

快速回复 返回顶部 返回列表