<!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. Python之数值运算（基础篇）

    1,类型 int类型(整数型).float类型(浮点型,小数型).bool布尔值(True 或者 Fasle) str类型(字符串).list类型(列表).tuple类型(元组).set类型(集合), ...

  2. JUnit5编写基本测试

    JUnit5的测试不是通过名称,而是通过注解来标识的. 测试类与方法 Test Class:测试类,必须包含至少一个test方法,包括: 最外层的class static member class @ ...

  3. hadoop学习（三）HDFS常用命令以及java操作HDFS

    一.HDFS的常用命令 1.查看根目录下的信息:./hadoop dfs -ls 2.查看根目录下的in目录中的内容:./hadoop dfs -ls in或者./hadoop dfs -ls ./i ...

  4. 剑指 Offer 12. 矩阵中的路径

    题目描述 是一道很常见的深搜题目,不过里面要考虑一些边界问题,比如走过的路径是不能再次走入的,所以我这里我自己的 代码想到是利用一个新的二维的数组,记录走过的路径,不过题解的直接将原二维数组中的路径隐 ...

  5. XCTF(MISC) give_you_flag

    题目描述:菜狗找到了文件中的彩蛋很开心,给菜猫发了个表情包 1.下载附件,点击查看 发现在数完钱后,有出现一个二维码的东西. 2.使用stegsolv工具,进行逐帧查看. 说个题外话,stegsolv ...

  6. Leetcode No.136 Single Number(c++实现）

    1. 题目 1.1 英文题目 Given a non-empty array of integers nums, every element appears twice except for one. ...

  7. 比较app版本大小----python

    def compare(a: str, b: str): '''比较两个版本的大小,需要按.分割后比较各个部分的大小''' lena = len(a.split('.')) # 获取版本字符串的组成部 ...

  8. WPF教程四：字段、属性、依赖项属性的演变过程

    这个章节主要讲解属性是什么,为什么会演变出依赖项属性,依赖属性的优势是什么.以及如何更好的使用属性和依赖项属性. 一.属性 属性是什么. 翻了好几本C#的书和微软的文档,我觉得对属性讲解比较好理解的就 ...

  9. postgresql安装及配置

    目录 1. 安装 2. PostgrepSQL的简单配置 2.1 修改监听的ip和端口 2.2 修改数据库log相关的参数 2.3 内存参数 3. 数据库的基础操作 3.1 连接数据库控制台 3.2 ...

  10. python使用笔记16--操作redis

    操作redis应先引入第三方模块 执行以下命令 pip install redis 1.redis常用方法 1 import redis 2 #decode_responses=True将bytes转 ...