1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <style>
  11.         .p_wrap{ width:100%; height: 100%; position: fixed; left: 0;top: 0; z-index: 10000;}
  12.         .p_wrap_mask{ width:100%; height: 100%; background:#000; filter:alpha(opacity=80); position: absolute; left: 0;top: 0; z-index:1;}
  13.         .p_out { margin: 0 auto; height: 100%; width: 600px;  overflow: hidden; position: relative; z-index: 10; }
  14.         .p_out {display: table; }
  15.         .p_mid {position: absolute; top: 50%;}
  16.         .p_mid{display: table-cell; vertical-align: middle; position: static; background: none;}
  17.         .p_in {position: relative; top: -50%;width: 600px;margin: 0 auto;}
  18.         .p_in{padding: 10px;border-radius: 8px;background: #fff;}
  19.         .p_in img{width: 100%;}
  20.     </style>
  21.     <!--图片弹窗-->
  22.     <div class="p_wrap">
  23.         <p class="p_wrap_mask"></p>
  24.         <div class="p_out">
  25.             <div class="row p_mid">
  26.                 <div class=" p_in" >
  27.                     <div>
  28.                         <img src="data:images/pic.jpg" alt="">
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.         </div>
  33.     </div>
  34.  
  35. </body>
  36. </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. 简聊DFA（确定性有限状态自动机）

    状态机理论最初的发展在数字电路设计领域.而在软件设计领域,状态机设计的理论俨然已经自成一体. 状态机是软件编程中的一个重要概念,比这个概念更重要的是对它的灵活应用.在一个思路清晰而且高效的程序中,必然 ...

  2. 35、sudo权限设置

    提示:sudo的介绍在"13.linux中用户和用户组"中有详细介绍: (1)简历里要加上如下项目经验: 服务器用户权限管理改造方案与实施项目 日期: 在了解公司业务流程后,提出权 ...

  3. 5、基本数据类型(str)

    5.1.字符串: 1.n1 = "lc" n2 = 'root' n3 = """chang""" n4='''tom' ...

  4. 重新整理 .net core 实践篇————跨域问题四十一]

    前言 简单整理一下.net core 的跨域问题,这个以前也整理过比较详细的,故而在此简单整理一下. 正文 对跨域相对的就是同源,什么是同源呢? 协议相同(http/https) 主机(域名)相同 端 ...

  5. CTF反序列化逃逸

    刷了一下CTF反序列化的题,去年没有好好了解.又补了一次PHP,害太菜了.每天看看别人的博客真的可以鼓舞人.简单记录一下两道字符串逃逸问题 推荐一个反序列化总结的很好的笔记https://www.cn ...

  6. Java | 一个".java"源文件中是否可以包括多个类（不包括内部类）

    第一种情况:(有public) 定义一个java源文件(Hello.java),里面只有一个类: public class Hello { public static void main(string ...

  7. 入门Kubernetes-Service

    一.前言 前一篇文章通过 Deployment 实现了Pod中服务实现滚动更新/回滚等操作:在真实应用场景中,需要将一组Pod提供给外部访问.而且Pod生命周期是短暂的,在 Pod 的生命周期过程中, ...

  8. Java on Visual Studio Code的更新 – 2021年6月

    Nick Zhu from Microsoft VS Code Java Team 大家好,欢迎来到 Visual Studio Code Java 更新的特别年中版.作为这篇文章的重点,我们将看看接 ...

  9. 「CF85E」 Guard Towers

    「CF85E」 Guard Towers 模拟赛考了这题的加强版 然后我因为初值问题直接炸飞 题目大意: 给你二维平面上的 \(n\) 个整点,你需要将它们平均分成两组,使得每组内任意两点间的曼哈顿距 ...

  10. Luogu P2051「AHOI2009」中国象棋

    看见第一眼觉得是状压 \(\text{DP}\)?观察数据范围发现不可做 那按照最常规思路设状态试试? 设状态为\(dp[i][j]\)表示\(i*j\)的棋盘的方案数 好像转移不了欸 要不再来一维? ...