方法一

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style>
.modal-header {
padding: 10px 20px;
background: rgba(0,0,0,.25);
color:#fff;
}
.modal-body{
padding: 20px;
background: #fff;
}
.modal {
border: 1px solid #888;
border-radius: 5px;
box-shadow: 0 0 3px rgba(0,0,0,.5);
/**主要代码*/
position:absolute;
top:50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div style="position:relative;width:100%;height:600px;border:1px solid #888">方法1
<div class="modal">
<div class="modal-header">弹出窗标题</div>
<div class="modal-body">
微信开发者大会(北京)的成功举办,引起业界的极大关注。
应广大微信开发者的强列要求,深圳微信开发者大会也在如火如荼的筹备中。
本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由
</div>
</div>
</div>
</body>
</html>

  

方法二:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style> .parent-panel{
width:100%;
height:400px;
border:1px solid #888; /**主要代码*/
display: flex;
align-items: center;
justify-content: center;
} .middle-panel{
width:500px;
border:1px solid #888;
} </style>
</head>
<body>
<div class="parent-panel">方法2
<div class="middle-panel">
<p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则,
在保持北京站特色之余,针对微信开发的新情况重新设置了议程,内容源于实践又富于启发性。
</p>
<p>正进行微信开发的开发团队(开发者)、有兴趣或即将投身于微信开发的开发者、
想开发相关微信应用正努力寻找微信开发团队的传统IT企业,该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。
</p>
<p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
</p>
</div>
</div>
</body>
</html>

  

方法三

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> <style> .middle-panel2{
width:500px;
border:1px solid #888;
display:inline-block;
vertical-align: middle;
}
.parent-panel2{
width:100%;
height:400px;
border:1px solid #888;
}
.parent-panel2:after{
/**主要代码*/
content:"";
display: inline-block;
vertical-align: middle;
height: 100%;
} </style>
</head>
<body>
<div class="parent-panel2">方法3
<div class="middle-panel2">
<p>深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则,
在保持北京站特色之余,针对微信开发的新情况重新设置了议程,内容源于实践又富于启发性。
</p>
<p>如果你还在犹豫,可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。
</p>
</div>
</div>
</div>
</body>
</html>

  

未知宽高div水平垂直居中的3种方法的更多相关文章

  1. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  2. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  3. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  4. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  5. 如何将一个div水平垂直居中?4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

  6. 如何将一个div水平垂直居中?6种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

  7. 关于div水平垂直居中的几种方法

    Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...

  8. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  9. 让div水平垂直居中的几种方法

    最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...

随机推荐

  1. leetcode 792. Number of Matching Subsequences

    Given string S and a dictionary of words words, find the number of words[i] that is a subsequence of ...

  2. jvm调试

    https://www.usenix.org/legacy/events/jvm01/full_papers/russell/russell_html/index.html

  3. LightOJ1220 —— 质因数分解

    题目链接:https://vjudge.net/problem/LightOJ-1220 1220 - Mysterious Bacteria    PDF (English) Statistics ...

  4. 如何强制ffmpeg编码时输出一个关键帧

    http://blog.csdn.net/ashlingr/article/details/7829429 如何强制ffmpeg编码时输出一个关键帧   如何强制ffmpeg编码时输出一个关键帧 AV ...

  5. 纯js实现省市级联效果

    我们都知道一般有注册的时候会让用户填入省市啊地区什么的,然后我就想使用纯js制作一个省市级联的效果,只是用于学习以及回顾温习用,首先看下效果图,界面很丑啊,不要嫌弃! 首先还是先看下我的项目目录吧 很 ...

  6. Spring MVC 注解json 配置

    1.首先在pom.xml中添加依赖jar包 <dependency>        <groupId>org.codehaus.jackson</groupId>  ...

  7. nyoj 1030 hihocoder 1338

    题目链接1: 点这里打开. 题目链接2:   点击打开链接 思路:dp,dp[i][j] 表示某个人在区间 i,j上的得分. sum数组表示前 n 项和, num 数组用来存输入的数字. 因为取数字是 ...

  8. codeforces 669B B. Little Artem and Grasshopper(水题)

    题目链接: B. Little Artem and Grasshopper time limit per test 2 seconds memory limit per test 256 megaby ...

  9. linux c++ 连接mysql 数据库

    Mysql是数据库中的主流,因此我一直以为在Linux下配置会很很容易,结果Google了大半天,大部分网页只说了如何安装Mysql之类的废话,对如何使用C/C++连接Mysql却只字不提,或者提的方 ...

  10. codevs 3095 黑心的市长

    3095 黑心的市长  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 钻石 Diamond   题目描述 Description A市有一条长Nkm的高速公路.有M个人各自想承包 ...