<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <style>

        .p_wrap{ width:100%; height: 100%; position: fixed; left: 0;top: 0; z-index: 10000;}

        .p_wrap_mask{ width:100%; height: 100%; background:#000; filter:alpha(opacity=80); position: absolute; left: 0;top: 0; z-index:1;}

        .p_out { margin: 0 auto; height: 100%; width: 600px;  overflow: hidden; position: relative; z-index: 10; }

        .p_out {display: table; }

        .p_mid {position: absolute; top: 50%;}

        .p_mid{display: table-cell; vertical-align: middle; position: static; background: none;}

        .p_in {position: relative; top: -50%;width: 600px;margin: 0 auto;}

        .p_in{padding: 10px;border-radius: 8px;background: #fff;}

        .p_in img{width: 100%;}

    </style>

    <!--图片弹窗-->

    <div class="p_wrap">

        <p class="p_wrap_mask"></p>

        <div class="p_out">

            <div class="row p_mid">

                <div class=" p_in" >

                    <div>

                        <img src="data:images/pic.jpg" alt="">

                    </div>

                </div>

            </div>

        </div>

    </div>

</body>

</html>

　　

未知高度-纯css实现水平垂直居中的更多相关文章

  1. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  3. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  5. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  6. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  7. CSS如何水平垂直居中？

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

  8. 前端面试题：CSS实现水平垂直居中

    这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...

  9. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

随机推荐

  1. CentOS安装ffmpeg+h264

    CentOS安装ffmpeg+h264 前言 坑!坑!坑! 全是坑. 本文安装系统环境为CentOS7.2.我这里提供安装所需的四个源码包,均需要编译安装.所有组件最好都安装最新的稳定版,或者下载使用 ...

  2. react 的优点

    1. 声明式开发 react 是声明式的开发方式,与之对应的是命令式开发方式.之前用jquery写代码的时候,我们都是直接操作dom,这种我们称为命令式的编程.命令式编程需要我们一点点的告诉dom,它 ...

  3. 如何在Linux下部署Samba服务？

    Samba简介 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件 ...

  4. 关于 Index '8' specified is out of bounds.

    报类似这样的错误暂时我只发现了两个原因: 1, 数组超出了界线,这个自己多多注意,加判断,在循环的时候看看是不是有结束条件 2, 你需要提交的网页不存在.有可能是因为你没有这个文件.可能是你的文件名错 ...

  5. Netty 框架学习 —— UDP 广播

    UDP 广播 面向连接的传输(如 TCP)管理两个网络端点之间的连接的建立,在连接的生命周期的有序和可靠的消息传输,以及最后,连接的有序终止.相比之下,类似 UDP 的无连接协议中则没有持久化连接的概 ...

  6. keycloak~账号密码认证和授权码认证

    用户名密码登录 POST /auth/realms/demo/protocol/openid-connect/token 请求体 x-www-form-urlencoded grant_type:pa ...

  7. shell运维习题训练

    注:初学shell,以下为本人自己写的答案,如果有更好的,请指教! 1. 求2个数之和: 2. 计算1-100的和 3. 将一目录下所有的文件的扩展名改为bak 4.编译并执行当前目录下的所有.c文件 ...

  8. [小技巧] Windows7 半角全角快捷键 修改方法

    From : http://blog.sina.com.cn/s/blog_87ab67b10100x3ww.html 转载说明:在浏览器下我们可以使用空格下翻一页,Shift + 空格上翻一页. 但 ...

  9. Java 设置PDF跨页表格重复显示表头行

    在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.set ...

  10. EF Core3.1 CodeFirst动态自动添加表和字段的描述信息

    前言 我又来啦.. 本篇主要记录如何针对CodeFirst做自动添加描述的扩展 为什么要用这个呢.. 因为EF Core3.1 CodeFirst 对于自动添加描述这块 只有少部分的数据库支持.. 然 ...