方法一

<!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. DTLS学习笔记 -- RFC 4347- 6347

    想学习一下dtls,是因为想以后没有公司免费VPN可用的时候,我能买一个主机,自己建一个VPN. 1.介绍 Web, email大多用TLS协议来做安全的网络传输,它们必须跑在可靠的TCP传输通道里. ...

  2. 基于springboot的Dubbo的常规总结

    1.引入jar包: <!-- Spring Boot Dubbo 依赖 --> <dependency> <groupId>com.alibaba.spring.b ...

  3. ubuntu动态加载模块简单模板

    1:简单代码 #include<linux/init.h> #include<linux/module.h> MODULE_LICENSE("GPL"); ...

  4. java编程思想-基础

    interface: 方法默认为public:成员变量默认 static and final 对象数组的定义:理解? 多接口继承:可以多个接口,但只有一个具体类,具体类在前面 自:多接口继承时,来自不 ...

  5. BZOJ 1621 [Usaco2008 Open]Roads Around The Farm分岔路口:分治 递归

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1621 题意: 约翰的N(1≤N≤1,000,000,000)只奶牛要出发去探索牧场四周的土 ...

  6. 第三篇:python基础之数据类型与变量

    阅读目录 一.变量 二.数据类型 2.1 什么是数据类型及数据类型分类 2.2 标准数据类型: 2.2.1 数字 2.2.1.1 整型: 2.2.1.2 长整型long: 2.2.1.3 布尔bool ...

  7. JSR 303 - Bean Validation 是什么?

    关于 Bean Validation JSR 303 - Bean Validation 是jree6 中的一项子规范,JSR 303 - Bean Validation着重解决以下实际问题: 在任何 ...

  8. Opencv— — mix channels

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  9. Swift初见

    Swift基本类型 Swift的类型是在C和OC的基础上发展而来的,Int是整型:Double和Float是浮点型:Bool是布尔型:String是字符串.类似OC,Swift也提出了三个集合类型:A ...

  10. 如何理解Web应用程序的MVC模型?

    View,也就是视图/视野,是你真正看到的,而非想象中的 Model.Controller,也就是控制器,是你用来改变 Model 方式.简单的说 Controller 和 View 分别是 Mode ...