方法一

<!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. 常用的ES6

    1 let 和 const 作用域: 只在声明指令的块级作用域内有效.① let所声明的变量可以改变,值和类型都可以改变,没有限制. let a = 123 a = 456 // 正确,可以改变 le ...

  2. HDU5015 233 Matrix —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/HDU-5015 233 Matrix Time Limit: 10000/5000 MS (Java/Others)    Memor ...

  3. Struts2基础知识

    1.什么是Struts2框架? 答:struts2是一款优秀的mvc框架,集中解决了Controlller的相关问题,解决了部分视图相关的问题(struts2标签): mvc 是一种思想,包括Mode ...

  4. struts2 小例子（教训篇）

    学了一阵子的struts2了,到了最后,想自己写个小程序,发现最简单的配置文件都 竟然能弄错,是我这几天睡眠不足么.怎么可能,爱好这门的,怎么会这样.这样真的很伤心啊.小小心灵受不了这种打击啊.... ...

  5. php排序方法之冒泡排序

    //冒泡排序法 $arr = array(3,55,45,2,67,76,6.7,-65,85,4); function bubblingSort($arr){ for ( $i=0; $i<c ...

  6. XML简介——可扩展标记语言（Extensible Markup Language）

    (What) XML是什么? XML指可扩展标记语言(Extensible Markup Language) 1.  XML是一种标记语言,类似HTML. 2.  XML具有自我描述性 3.  XML ...

  7. Java 并发 —— volatile 关键字

    volatile 修饰变量等于向编译器传达如下两层含义: 保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了某个变量的值,这新值对其他线程来说是立即可见的. 禁止进行指令重排序. volat ...

  8. RTP Payload Format for Transport of MPEG-4 Elementary Streams over http

    1．SDP (1)Http Request GET /getSdpForUrl?HttpUrl=nphMpeg4/g726-640x480 HTTP/1.0/r/n Host: 58.63.71.90 ...

  9. CodeForces 1110G. Tree-Tac-Toe

    题目简述:给定$n$个节点的树,其中一些节点被染成了白色(其余节点未染色).黑白双方博弈,白先动.轮到黑(白)方时,选择树上的一个未染色的节点并将其染成黑(白)色.率先达成三连色(即存在三个节点$a, ...

  10. linux网络编程中的超时设置

    1 下面是在网上找到的资料,先非常的感谢. 用setsockopt()来控制recv()与send()的超时 在send(),recv()过程中有时由于网络状况等原因,收发不能预期进行,而设置收发超时 ...