<!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. Qt：报文接收不完成，产生分帧的处理方法

    最近在设备的测试工装时,通过串口,向设备发送自定义规约,其报文的枕结构已经编写,使用串口助手调试,设备可正常回复,但是通过工装,接收报文会不完整,导致解析失败.使用qDebug打印出来却发现数据被分成 ...

  2. Kubernetes在生产环境中的一些讨论

    pod是所有一切资源的中心,毫无疑问是Kubernetes中最重要的资源.毕竟, 每个应用都运行在pod中.为了确保知道如何开发能充分利用应用所在环境资源的应用,最后再从应用的角度来仔细看一下pod. ...

  3. 单片机引脚扩展芯片74HC595手工分解实验

    我们先来看下效果 74HC595是常用的串转并芯片,支持芯片级联实现少量IO口控制多个IO口输出功能 14脚:DS,串行数据输入引脚 13脚:OE, 输出使能控制脚,它是低电才使能输出,所以接GND ...

  4. 30、css介绍

    30.1.css概述: css是Cascading Style Sheet的简称,中文称为层叠样式表,是用来控制网页数据表现的,可以 使网页的表现与数据内容分离: 30.2.css的四种引入方式: 1 ...

  5. 11、函数(def)

    11.1.函数: 函数即变量 函数的作用域只跟函数声明时定义的作用域有关,跟函数的调用位置无任何关系 1.函数格式: def test(x): ''' 2*x+1 :param x:整形数字 :ret ...

  6. Devexpress-WPF初体验

    最近使用wpf devexpress做一个wpf小项目,中间遇到了一些问题,这里记录下,同时也跟大家分享分享 1.devexpress安装 devexpress提供了很多控件,特别是各种形式的数据列表 ...

  7. 用“kill”命令来强制终结某个行为或失常的应用和命令

    ​       首先让我们先了解"kill"命令,无论你使用哪种操作系统,你一定会遇到某个行为失常的应用,它把自己锁死并拒绝关闭.在Linux(还有Mac),你可以用一个" ...

  8. Software Architecture软件架构（方法、模式与框架）纵横谈

    Software Architecture软件架构是啥 随着软件行业的发展,软件的规模越来越大,"Software Architecture软件架构"这个名词开始频繁出现.&quo ...

  9. Java：Java中static关键字作用

    static关键字最基本的用法是: 1.被static修饰的变量属于类变量,可以通过类名.变量名直接引用,而不需要new出一个类来 2.被static修饰的方法属于类方法,可以通过类名.方法名直接引用 ...

  10. Spring：Spring项目多接口实现类报错找不到指定类

    spring可以通过applicationContext.xml进行配置接口实现类 applicationContext.xml中可以添加如下配置: 在application.properties中添 ...