工作中经常要用到的水平垂直居中实现

业务场景1、弹窗遮罩的水平垂直居中

实现方法1>让弹窗外层固定定位,width、height设置为100%,再让弹窗绝对定位,接着让元素平移或者用margin:auto实现垂直居中,代码类似如下:.warpper{position:fix;width:100%;height:100%;top:0;left:0;}.dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}或者.dialog{position:absolute;top:0;left:0;bottom:0;rigth:0;margin:auto},当然首选还是前一种,因为少了一行代码哈哈哈哈哈。(当弹框的高度需要随着内容自适应的时候,不适合使用这种方法,因为这时候如果没有写高度,高度就会是跟父元素一样)

实现方法2>让弹窗外层固定定位,并设置为弹性盒子然后设置justifu-content、align-items属性,类似代码如下:.wrapper{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;justify-content:center;align-items;center;},或者.wrapper{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;};.dialog{margin:auto}不过这种方法好像还没有在实际中应用过,下次一定要尝试一下

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...
    剑残阅读 9,715评论 0 8
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,918评论 0 1
  • 这是前些日子困扰的问题,记录一下。 在又一次更新之后系统就报了错: 当时给的解决方法是通过组策略设置加密Oracl...
    Shinea阅读 737评论 0 0
  • 这本书去年很火,大家都在看,一直想看。这本书刚开始看就引起了我的兴趣。尽管看的是译文版,但是译者的水平确实了不起,...
    DQJY阅读 443评论 0 2
  • 一、进行研究性学习的必要性 传统的学习是以灌输为主,强调系统的学习,追求的是知识的传递,将学生看作是一个容器 ,采...
    徐徐聪阅读 336评论 0 2