方法一

<!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 ...