<!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. [React] React Router: setRouteWillLeaveHook

    setRouteWillLeaveHook provides a method for us to intercept a route change before leaving the curren ...

  2. [Falcor] Return the data from server

    <!-- index.html --> <html> <head> <!-- Do _not_ rely on this URL in production. ...

  3. Nested Class Templates

      Templates can be defined within classes or class templates, in which case they are referred to as ...

  4. Python 文件I/O （转）

    Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...

  5. C#。2. 2 语句

    二.语句: 顺序,分支,循环. (一)顺序:略 分支:判断--表达式. if(){} 四大类: 1.if if (age > 18) {             Console.WriteLin ...

  6. OD: Format String, SQL Injection, XSS

    Format String 格式化串漏洞 考虑如下的代码: #include<stdio.h> int main() { int a=44,b=77; printf("a=%d, ...

  7. oracle开机自启动-超简单

    1. 在/etc/oratab中作如下修改$ORACLE_SID:$ORACLE_HOME:Y例如vi /etc/orataborcl:/u01/app/oracle/product/10.2.0/d ...

  8. C++ list用法

    创建一个list实例并赋值: // 创建实例以及赋值 #include <iostream> #include <list> using namespace std; int ...

  9. runtime error ?

    程序运行时错误(运行时出错就是出现在程序运行过程中的),有很多种: 比如:溢出.内存泄露.死循.乱用指针.数组越界(数组开小了?).除以0错误.递归太深层(系统暴栈了)

  10. js判断是否微信浏览器打开

    function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)==&qu ...