css实现弹出窗口始终垂直水平居中

最新推荐文章于 2022-06-30 17:49:19 发布
最新推荐文章于 2022-06-30 17:49:19 发布
阅读量8.5k 收藏 2
点赞数 1
文章标签： positionfixed top50
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny327/article/details/47419949/
版权
<!DOCTYPE html>< html >
< head >
< meta charset = " utf-8" >
< meta name = "author" content = "http://www.softwhy.com/" />
< title >蚂蚁部落</ title >
< style type = "text/css" >
body{
   height:1000px;
}
.antzoen{
   position:fixed;
   width:250px;
   height:100px;
   background:#ececec;
   left:50%;
   top:50%;
   margin-left:-125px;
   margin-top:-50px
}
</ style >
</ head >
< body >
< div class = "antzoen" ></ div >
</ body >
</ html >


但是这种方法ie6不支持fixed属性，但是现在大多不再考虑ie6。所以尽可以放心使用。
sunny327
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
css-弹窗内容居中显示
qq_38254123的博客
01-22 521
css-弹窗内容居中显示 html结构： <div class="js-mask"> <div class="js-mask-main"> <p class="main-title">弹窗标题</p> <ul class="main-con page-scroll-y"> <li> <h3>内容一：</h3>
弹出层（遮罩层）弹出页面垂直居中
09-03
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
[分享] 纯CSS完美实现垂直水平居中的6种方式
weixin_34038293的博客
07-29 584
前言 由于HTML语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯CSS实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1、绝对定位+margin：auto &l...
css 单元格弹窗水平垂直居中/防止下级滚动
weixin_47239395的博客
04-21 135
.div{ width: 450px; height:380px; padding: 10px; background-color: #fff; border-radius: .16rem .16rem 0 0; position:fixed;//div弹出层防止遮罩下层数据可滚动问题 left:50%; top:50%; margin-left: -225px; //是width的一半 marg...
css弹窗屏幕居中
ccsdn的博客
08-21 5083
position:fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -ms-transform::translateX(-50%) translateY(-50%); -moz-transform::translateX(-50%) translateY(-50%); -webkit-transform:...
基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）
12-12
有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。 $(document)是获取整个网页的，$(window)是获取当前窗体的，这...
jquery js css弹出居中的遮罩层
03-01
有js+css和jquery+css实现的弹出居中的遮罩层，兼容IE6 7 8 和ff
jquery 弹出窗口，可缩放，可拖拽
03-21
可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直居中；超大响应区域特别为ipad等触屏设备优化；预先缓存皮肤图片更快响应…… 跨平台兼容 兼容：IE6+、Firefox、Chrome、Safari、Opera以及...
jQuery实现不同弹窗大小均垂直居中效果
06-10
我们见过很多jQuery实现的弹出窗口效果，当然，... 今天给大家推荐一个，无论你弹出窗口分辨率多少，均会实现垂直居中效果 使用方法： 1、附件中只提供了一个index.html文件，所以看起来并不复杂，稍加辨识即可
LHGDialog 4.0.1 正式版 lhgDialog弹出窗口组件 lhgdialog-4.0.1
12-28
本组件主要以iframe方式加载单独页面为主的弹出窗口，由其适用于后台管理和webOS类项目使用，独立的内容页更方便管理，页面的也不易受其它页面的影响，而且内容页可以是静态或动态的任何一种文件。 强大灵活的接口 ...
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
10-26
本文为大家详细介绍下使用js实现遮罩弹出层居中，且随浏览器窗口滚动条滚动，示例代码如下，感兴趣的朋友可以参考下
CSS+DIV弹出居中层同时背景变灰色半透明源码
08-08
CSS+DIV弹出居中层同时背景变灰色半透明源码
纯CSS3,无JS实现不定宽高水平垂直居中，最优方法。
eeeecw的博客
04-30 1260
方法一：通过transform实现不定宽高元素水平垂直居中 .example1{ position: absolute; top: 50%; left: 50%; z-index: 3; -webkit-transform:translate(-50%,-50%); border-radius: 6px; background: #fff; } 方法二：通过flex布局实现不定宽
css 居中弹出,纯 CSS 制作的居中弹出层
weixin_42317885的博客
08-03 194
刚刚翻了下大漠的那本书看到那个 CSS3 的 target 属性我也是醉了，用的活这个可以用到很多地方。你想了解更多 CSS3 的技巧还是去看看大漠的那本书吧，才 9.9人民币。真想不到那些写书的大神怎么想的，辛辛苦几年写的书，几块钱就答应卖出去，想想就醉了...主要用到的知识点: CSS3里的 target 选择器。其余的自行发挥...直接上代码结构了:HTML: SCSS:/**By Go7...
弹出框--用css实现div在页面居中（水平垂直居中效果）
热门推荐
qq_26780317的博客
10-10 2万+
前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。 一、div宽高固定，使用css实现居中效果 ①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,lef...
使用css 控制弹出框始终水平居中
du_peiduo的专栏
12-02 3590
使得弹出框的 position:fixed; 距离左侧 left:50%; 然后再知道弹出框宽度的情况下像左偏移 宽度的1/2即可 .invite-dialog { margin-left: -144px; position: fixed; left: 50%; width: 288px; min-height: 166px; background: white;
自适应弹出框-垂直居中
liyuedan的专栏
05-12 1万+
自适应弹出框 .box-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50); z-index: 99; display: none; } .box { position: ab
css 弹窗相对不同屏幕居中
weixin_44805839的博客
06-30 559
css 弹窗相对不同屏幕居中
css实现弹出框在页面居中
gll77
07-31 5021
css简单方法实现弹出框在页面居中
css实现垂直水平居中
最新发布
04-29
要实现CSS中的垂直水平居中，可以使用以下几种方法： 1. 使用Flexbox布局： 可以通过设置父容器的display属性为flex，并使用justify-content和align-items属性来实现垂直水平居中。具体代码如下： ```css ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值