方法一

<!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. apk下载与安装

    public class MainActivity extends Activity { private File apkFile; @Override protected void onCreate ...

  2. 关于web页自动适配屏幕大小

    一.先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...

  3. codeforces Codeforces Round #273 (Div. 2) 478B

    B. Random Teams time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  4. Gym - 101147G G - The Galactic Olympics —— 组合数学 - 第二类斯特林数

    题目链接:http://codeforces.com/gym/101147/problem/G G. The Galactic Olympics time limit per test 2.0 s m ...

  5. 网页兼容性测试（工具使用IETESTER、Firefox、360安全浏览器）

    网页兼容性测试主要是针对不同的浏览器进行的测试.由于用户浏览器的不同,往往都会使我们的网页发生页面样式错乱,图片无法显示等问题.对于前端开发工程师来说,确保代码在各种主流浏览器的各个版本中都能正常显示 ...

  6. linux下mysql开启二进制日志

    mysql的查询日志,慢查询日志,错误日志,网上的设置方法是正确的.但在二进制日志上设置有问题.正确的设置方法如下, 在/etc/my.cnf文件中[mysqld]下加上: server-id = 1 ...

  7. (测试)LaTeX公式

    \[a^2+b^2=c^2\] \[F(\omega)=\mathcal{F}[f(t)]=\int_{-\infty}^\infty f(t)e^{-iwt}\,dt\] \[\sum_{i=0}^ ...

  8. Java原子属性更新器AtomicReferenceFieldUpdater的使用

    AtomicReferenceFieldUpdater是基于反射的工具类,用来将指定类型的指定的volatile引用字段进行原子更新,对应的原子引用字段不能是private的.通常一个类volatil ...

  9. Ubuntu18.04 安装 JDK7

    直接下载jdk压缩包方式安装 1.官网下载JDK      地址: http://www.oracle.com/technetwork/articles/javase/index-jsp-138363 ...

  10. bzoj3680

    $模拟退火$ $这种全局最优的问题用模拟退火$ $模拟退火就是每次向四周随机移动,移动的幅度和温度成正比,如果新的位置更优就接受,否则按一定概率接收,概率和温度成正比$ $最后稳定后再在最优解附近蹦跶 ...