方法一

<!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. ImageIO 操作图片

    /** * 读取本地图片到另一个本地文件夹 * @throws IOException */ public void copeImageToOtherFolder() throws IOExcepti ...

  2. Codeforces Round #371 (Div. 2) C. Sonya and Queries —— 二进制压缩

    题目链接:http://codeforces.com/contest/714/problem/C C. Sonya and Queries time limit per test 1 second m ...

  3. WebDriver API——延时操作及元素等待

    在自动化测试过程当中,受网络.测试设备等诸多因素的影响,我们经常需要在自动化测试脚本中添加一些延时来更好的定位元素来进行一系列的操作. 一般有这么几种方式: 1.implicitlyWait.识别对象 ...

  4. linux应用之gcc编译器的安装及使用

    gcc是linux系统下功能十分强大的编译器. 本人使用的是CentOS 6.6 64位系统,由于在安装系统的时候并没有勾选安装gcc编译器,因此需要自行安装gcc编译器. 使用yum安装gcc 对于 ...

  5. WebApi发送HTML表单数据：文件上传与多部分MIME

    5.3 Sending HTML Form Data5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/282 ...

  6. mysql 数据库修改用户名和密码

    因为经常修改数据库密码,也找到了几种修改数据库密码的方式,在这里给大家介绍下供大家参考通过navicat 管理数据库客户端来修改数据库密码: 选择数据库 --- 点击导航条的用户  --- 编辑用户 ...

  7. Jmeter 在什么情况下定义多个thread group？

    Jmeter里面有三种线程组:setUp thread group, TearDown thread group, thread group. 如果想定义100个用户登录系统,60个用户做A操作,40 ...

  8. 关于cuda 环境遇到的问题

    1.error while loading shared libraries: libcudart.so.9.0: cannot open shared object file: No such fi ...

  9. PHP 时间戳

    <?php php 获取今日.昨日.上周.本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime.下面首先还是直奔主题以示例说明如何使用 mktime 获取今日.昨日 ...

  10. centos时区

    执行:cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime是将shanghai时区设置为系统时区 执行:date +%s 获取的是系统的utc时间戳 ...