方法一

<!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. Android如何配置init.rc中的开机启动进程(service)【转】

    本文转载自:http://blog.csdn.net/qq_28899635/article/details/56289063 开篇:为什么写这篇文章 先说下我自己的情况,我是个普通的大四学生,之前在 ...

  2. Partition算法及Partition算法用于快速排序

    JavaScript简单方便,所以用JavaScript实现,可以在Chrome控制台下观察运行结果.主要实现Partition算法,比如输入为   var array = [4, 2, 1, 3, ...

  3. tomcat启动项目被重新加载，导致资源初始化两遍

    之前没有遇到过这个问题,配了三天的项目了,惊人啊!!!各种怪问题全被我赶上了.真有种骂人的冲动. tomcat启动项目时,项目资源被加载两遍. 原因:配置虚拟目录导致,项目被重新加载. <Hos ...

  4. 简单实现php文件管理

    如何能够利用PHP语言来进行空间中的文件管理,为我们带来良好的空间布局呢?今天我们就为大家介绍一种简便的PHP文件管理的实现方法. PHP预定义变量数组种类概览 PHP uploaded_files函 ...

  5. Rsync+Inotify同步

    rsync服务安装与<rsync+sersync同步>环境一样! 安装inotify-tools 在源服务器10.10.2.191上操作: 1.查看服务器内核是否支持inotify ll ...

  6. 【C/C++】任意大于1的整数分解成素数因子乘积的形式

    // #include<stdio.h> #include<math.h> #include<malloc.h> int isprime(long n); void ...

  7. June 25,2014---->Binder(IPC),Dalvik ,DEX/ODEX

    1.Binder(IPC) Linux进程之间要能够互相通信,从而共享资源和信息.所以,操作系统内核必须提供进程间的通信机制(IPC,Inter-Process Communication). IPC ...

  8. BZOJ-2257：瓶子和燃料（裴蜀定理）

    jyy就一直想着尽快回地球,可惜他飞船的燃料不够了. 有一天他又去向火星人要燃料,这次火星人答应了,要jyy用飞船上的瓶子来换.jyy的飞船上共有 N个瓶子(1<=N<=1000) ,经过 ...

  9. python 基础之第二天

    [root@master script]# vim while_counter.py #!/usr/bin/python # coding: utf-8 sum = 0 counter = 0 whi ...

  10. linux 查看某进程 并杀死进程 ps grep kill

    Linux 中使用top 或 ps 查看进程使用kill杀死进程 1.使用top查看进程: $top 进行执行如上命令即可查看top!但是难点在如何以进程的cpu占用量进行排序呢? cpu占用量排序执 ...