<!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. Xmanager6 企业版安装

    Xmanager6 企业版安装 链接:https://pan.baidu.com/s/1QZOD0iPd4WbVHBVXIbJ-fw 提取码:ebkl 一.安装教程 1.1 下载解压,双击安装exe主 ...

  2. 13、ssh跳板机

    13.1.前提条件: 1.跳板机服务器和其它服务器建立了ssh秘钥登录: 2.目前的环境: (1)各服务器上都建立了lc用户,并给于sudo (lc ALL= NOPASSWD:ALL )权限,lc就 ...

  3. HDU 4292 Food 多源多汇入门题

    Food 有F种食物和D种饮料,每种食物或饮料只能供有限次,且每个人只享用一种食物和一种饮料.现在有n个人,每个人都有自己喜欢的食物种类列表和饮料种类列表,问最多能使几个人同时享用到自己喜欢的食物和饮 ...

  4. 基于uni-app全端弹框组件uaPopup「兼容h5+小程序+app端|nvue」

    uniapp兼容多端自定义模态弹框组件UAPopup ua-popup 一款轻量级的uniapp自定义弹窗组件.汇集了android.ios和微信弹窗效果(msg消息.alert提示框.dialog对 ...

  5. 如何消除inline-block元素之间的间隙？

    一.问题现象 在CSS布局中,如果我们想要将多个行内块元素并排,会发现同行显示的inline-block元素之间会出现一定的空隙,这就是换行符/空格导致的,叫做换行符/空格间隙. 1 <!DOC ...

  6. 接口自动化框架搭建Unittes+HTMLTestRunner

    本次主要尝试搭建接口自动化框架,基于 unittest+HTMLTestRunner 框架主要模块: config: 存放配置文件 lib: 封装了一些接口前置函数:处理各种事物 log: 存放生成的 ...

  7. Linux：修改Ubuntu环境变量后bash找不到

    1.问题显示 修改环境变量,导致命令全部失效  2.解决办法 #使用备份bin export PATH=/usr/bin:/bin  之后使用命令就可以了. 3.找到修改的环境变量 一般修改的环境变量 ...

  8. Java：代码高效优化

    本文转自阿里技术站,感谢阿里前辈提供的技术知识,微信关注 "阿里技术" 公众号即可实时学习. 1.常量&变量 1.1.直接赋值常量值,禁止声明新对象 直接赋值常量值,只是创 ...

  9. IDA，IDA PRO 产品介绍

    IDA理念这是我们在开发产品时竭尽全力遵循的理念--在此过程中,我们相信我们将开发出能够为您带来所需的可靠性.便利性和易用性的软件.没有什么能打败人脑因为我们知道一秒钟的洞察力仍然胜过百年的处理时间, ...

  10. PHPCMSV9版本代码审计学习

    学习代码审计,自己简单记录一下.如有错误望师傅斧正. PHPCMS预备知识 PHPCMS是采用MVC设计模式开发,基于模块和操作的方式进行访问,采用单一入口模式进行项目部署和访问,无论访问任何一个模块 ...