css实现div在屏幕内垂直水平居中

  • 内容
  • 相关

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

第一种情况:

如果弹出的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% */
}
< 六十二博客 >

本文标签:

版权声明: 若无特殊注明,本文皆为《 六十二丶 》原创,转载请保留文章出处。

本文链接: css实现div在屏幕内垂直水平居中 》 - https://prm612.top/post-33.html

解压说明: 如本站部分资源使用时需输入解压密码,本站所有资源的解压密码均默认为: prm612

收录情况: 百度暂未收录

站长QQ: 597782047 点击这里给我发消息 本网站的资源部分来源于网络,如有侵权,请 联系站长 进行删除处理。

本站留言 - 投诉建议: Email:597782047@qq.com 链接失效?( 点击提交 )请说明失效链接地址+名称

本站网址: https://prm612.top/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

未显示?请点击刷新

允许邮件通知

正在加载...

点击↑关闭 2019年,祝大家
“诸”事吉祥!
网站备案相关信息
域名
主办方名称
主办单位性质
主体备案号
ICP备案号
首页地址 https://prm612.top/ [备案查询]
网站名称
审核时间
00:00 / 00:00
随机播放