<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<!--方法1：一个未知宽高的弹出框，水平垂直居中-->

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

<style type="text/css">

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

<!--方法1 end-->

<!--方法2 parent-panel内的元素水平垂直居中-->

<div class="parent-panel">方法2

	<div class="middle-panel">

		<p>深圳站依然秉承“演讲从实践出发、听众从中受益”的原则。

		在保持北京站特色之余，针对微信开发的新情况又一次设置了议程，内容源于实践又富于启示性。

</p>

		<p>正进行微信开发的开发团队（开发人员）、有兴趣或即将投身于微信开发的开发人员、

		想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。

</p>

		<p>假设你还在犹豫。能够细致阅读一下主办方总结的技术团队不应错过2014年微信开发人员大会深圳站的十个理由。

		</p>

	</div>

</div>

<style type="text/css">

.middle-panel{

	width:500px;

	border:1px solid #888;

}

.parent-panel{

	width:100%;

	height:400px;

	border:1px solid #888;

	/**主要代码*/

	display: flex;

    align-items: center;

    justify-content: center;

}

</style>

<!--方法2 end-->

<!--方法3 parent-panel2内的元素垂直居中-->

<div class="parent-panel2">方法3

	<div class="middle-panel2">

		<p>深圳站依然秉承“演讲从实践出发、听众从中受益”的原则。

		在保持北京站特色之余，针对微信开发的新情况又一次设置了议程，内容源于实践又富于启示性。

</p>

		<p>假设你还在犹豫，能够细致阅读一下主办方总结的技术团队不应错过2014年微信开发人员大会深圳站的十个理由。

		</p>

	</div>

</div>

<style type="text/css">

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

<!--方法3 end-->

</body>

</html>

未知宽高div水平垂直居中3种方法的更多相关文章

  1. 未知宽高div水平垂直居中的3种方法

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  3. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  4. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  5. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  6. div水平垂直居中的六种方法

    在平时,我们经常会碰到让一个div框针对某个模块上下左右都居中(水平垂直居中),其实针对这种情况,我们有多种方法实现. 方法一: 绝对定位方法:不确定当前div的宽度和高度,采用 transform: ...

  7. 不固定高宽的 div 水平垂直居中

    <div class="father"> <div id="main"></div> </div> .fathe ...

  8. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

  9. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

随机推荐

  1. 正则表达式JSP实例

    <%@ page language="java" import="java.util.*,cn.com.Person,cn.com.Adddress" p ...

  2. Qt使用AES加密算法对字符串进行加密

          因工作需要,需要对字符串进行加密处理,在网上找了很长时间,终于找到了一个可以使用的aes加密算法.其源代码采用c++编写而成,但其头文件引用windows.h,经过修改部分代码,将#inc ...

  3. (第三章)Java内存模型(上)

    一.java内存模型的基础 1.1 并发编程模型的两个关键问题 在并发编程中,需要处理两个关键问题:线程之间如何通信及线程之间如何同步(这里的线程是指并发执行的活动实体).通信是指线程之间以何种机制来 ...

  4. jquery之onchange事件

    $(function(){ $("#opreateHtml").window("close"); $("#deliveryGrid").da ...

  5. java中的变量

    变量就是命名的内存空间 1.声明和赋值方式:数据类型   变量名 = 值: 数据类型即划分的内存空间,变量名即划分出的内存空间的名 2.变量必须先声明才能使用,不能使用一个没有经过预先声明的变量:没有 ...

  6. （转）C#中的委托,匿名方法和Lambda表达式

    简介 在.NET中,委托,匿名方法和Lambda表达式很容易发生混淆.我想下面的代码能证实这点.下面哪一个First会被编译?哪一个会返回我们需要的结果?即Customer.ID=5.答案是6个Fir ...

  7. (转)ip地址，手机ip查询

    页面地址:http://www.ip138.com/ 外链地址(实际主页面里面有)http://www.ip138.com/iplink.htm 外链地址里面的内容: <FORM METHOD= ...

  8. 使用.NET框架、Web service实现Android的文件上传（二）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYUAAAKpCAIAAADcx6fPAAAgAElEQVR4nOydd1hT5+LHg1attbfr1t ...

  9. 更换ios 开发者账号与下载别人的代码 真机调试时注意切换

    Buid Setting search sign

  10. js学习笔记——数组方法

    join() 把数组中所有元素转化为字符串并连接起来,并返回该字符串, var arr=[1,2,3]; var str=arr.join("#"); //str="1# ...