<!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. USB 管道 && 端点

    管道是对主机和usb设备间通信流的抽象.      管道和usb设备中的端点一一对应,一个usb设备含有多少个端点,其和主机进行通信时就可以使用多少条管道,且端点的类型决定了管道中数据的传输类型.  ...

  2. pwn学习之dl_resolve学习篇

    一:首先来了解一下linux下常见的攻击缓解机制: CANARY:(金丝雀值,指的是矿工曾利用金丝雀来确认是否有气体泄漏,如果金丝雀因为气体泄漏而中毒死亡,可以给矿工预警),类似于windows GS ...

  3. 让 asp.net mvc 支持 带有+ _ 等特殊字符的路由

    最近配置微信 业务域名 时,需要在服务器的根目录中上传一个文本文件,而这个文本文件需要放这样的目录中: 于在就在 服务器目录中创建了对应的文件夹,并将kuPv.txt上传,但是访问时,却怎么也访问不到 ...

  4. excel运行最多行数

    2003及以前版本为65536(即6万多)行,256列2007版:1048576(即1百零多万)行,16384(即1千多)列

  5. C#_Stopwatch 类

    命名空间:System.Diagnostics Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 Stopwatch 方案中,先调用 Start 方 ...

  6. 不用标准库实现memmove，借助一个缓冲区temp，即使src和dest所指的内存有重叠也能正确拷贝

    void *mymemmove(void *dest,const void *src,size_t count) { char temp[count]; int i; char *d=(char *) ...

  7. POJ2100 Graveyard Design（尺取法）

    POJ2100 Graveyard Design 题目大意:给定一个数n,求出一段连续的正整数的平方和等于n的方案数,并输出这些方案,注意输出格式: 循环判断条件可以适当剪支,提高效率,(1^2+2^ ...

  8. spark1.3.1使用基础教程

    spark可以通过交互式命令行及编程两种方式来进行调用: 前者支持scala与python 后者支持scala.python与java 本文参考https://spark.apache.org/doc ...

  9. mybatis常用语句

    <trim>标签中,prefix 前缀,suffix后缀, suffixOverrides语句最后如果有指定符号,则去除此符号, prefixOverrides语句最前面如果有指定符号,则 ...

  10. web标准(复习)--5 超链接伪类

    今天我们开始学习超链接伪类,包含以下内容和知识点: 链接的四种样式 将链接转换为块状 用css制作按钮 首字下沉 一.超链接的四种样式 超链接可以说是网页发展史上一个伟大的发明,它使得许多页面相互链接 ...