登录  |  注册
当前位置：网站首页 > 更多 > 站长帮 > 正文

[Web相关学习] css实现div在屏幕内垂直水平居中

作者：CC下载站 日期：2018-10-31 08:20:37 浏览：2122 分类：站长帮

今天遇到一个问题，就是一个弹出层如何在屏幕正中间显示，虽然我解决了，但是我还是没有第一时间想起来，感觉应该记录一下，以后空闲时间多看一下。

第一种情况：

如果弹出的div是有固定宽高的话，css这样写

div {
    position: fixed;
    top: calc(50% - height/2);
    left: calc(50% - width/2);
}
或者
div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin:-高/2 0 0 -宽/2;
}
或者其他

第二种情况：

如果弹出的div没有固定宽高的话，css这样写（当然了，有固定宽高的时候也可以这样写，但是这个最实用没有固定宽高的时候）

div {
    position:absolute;
    left:50%;    /* 定位父级的50% */
    top:50%;
    transform: translate(-50%,-50%); /*自己的50% */
}


猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯