<!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. 详解C++ friend关键字

    1. 为什么要使用友元? 通常对于普通函数来说,要访问类的保护成员是不可能的,如果想这么做那么必须把类的成员都生命成为 public( 共用的) ,然而这做带来的问题遍是任何外部函数都可以毫无约束的访 ...

  2. 常用分组函数count-avg-sum-max-min

    分组函数也称多行函数,用于对一组数据进行运算,针对一组数据(取自于多行记录的相同字段)只返回一个结果,例如计算公司全体员工的工资总和.最高工资.最低工资.各部门的员工平均工资(按部门分组)等.由于分组 ...

  3. Eclipse的Tomcat热部署，免重启的方法

    背景与目标: 最好使用MyEclipse部署Web应用,在开发调试时,非常方式.资源文件修改可以自动的同步.修改Java文件,除非改变类的结构定义,也可以实现热部署的效果. 后来使用Eclipse J ...

  4. （一）《Java编程思想》学习——按位运算符、移位运算符

    (第三章) (一)按位运算符 按位逻辑运算符有: “与”(AND)        & 1&1=1;1&0=0;0&0=0 “或”(OR) | 1|1=1;1|0=1;0 ...

  5. css行高line-height的用法（转）

    本文导读: “行高“指一行文子的高度,具体来说是指两行文子间基线间的距离.在CSS,line-height被用来控制行与行之间的垂直距离.line- height 属性会影响行框的布局.在应用到一个块 ...

  6. linux目录权限小记

    r : 拥有读取目录结构列表的权限 x:拥有进入此目录的权限 w: 1: 建立新的档案和目彔: 2删除已经存在的档案和目录(无论该档案的权限为何!) 3能够重命名档案和目录: 4 能够移动目录里面的 ...

  7. Swift 流程控制

    import Foundation ...{ == { print(index) } } // 可选变量 类型后面加? var myName:String?="jikexueyuan&quo ...

  8. C#多线程实践——线程同步

    下面的表格列展了.NET对协调或同步线程动作的可用的工具:                       简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成      ...

  9. do/while(0) c4127

    原文链接:http://cnicholson.net/2009/03/stupid-c-tricks-dowhile0-and-c4127/ // NOISY CODE #define MULTI_L ...

  10. JSP中页面定时刷新

    1.JSP中页面定时刷新 <% //页面每隔30秒自动刷新一遍 response.setHeader("refresh" , "30" ); %> ...