<!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. ubuntu server 14.04.4 无线网卡没有启用，找不到wlan0端口

    Ubuntu Server默认的情况下是不会启用无线网卡的,想想实际服务器上怎么可能有无线网卡呢,呵呵.所以我们需要手动来启用无线网卡,难点就在这里了. 使用ifconfig命令,发现没有wlan口, ...

  2. Set,Map数据结构

    /*Set : 多个value的集合, value不重复Map : 多个key-value对的集合, key不重复 1. Set容器 1). Set() 2). Set(array) 3). add( ...

  3. GridView 和 Access数据库实现数据绑定(asp.net)

    前台代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="主页.aspx.cs ...

  4. [转]Swift编程风格指南

    语言 使用美式英语拼写以匹配苹果公司的API 优选: var color = "red" 不建议使用: var colour = "red" 间隔 使用2个空格 ...

  5. 第1章 网络编程基础(2)——Socket编程原理

    Socket编程原理 Socket是网络通信端点的一种抽象,它提供了一种发送和接收数据的机制. 流socket(SOCK_STREAM):双向.有序.无重复.并且无记录边界 数据报Socket(SOC ...

  6. POJ2976 Dropping tests(二分+精度问题）

    ---恢复内容开始--- POJ2976 Dropping tests 这个题就是大白P144页的一个变形,二分枚举x,对a[i]-x*b[i]从大到小进行排序,选取前n-k个判断和是否大于等于0,若 ...

  7. C/C++语言中const的用法

    1. const 在C和C++中的区别     C++中的const正常情况下是看成编译期的常量,编译器并不为const分配空间,只是在编译的时候将期值保存在名字表中,并在适当的时候折合在代码中. 所 ...

  8. （原）ubuntu14.04中安装gcc4.9和g++4.9

    http://stackoverflow.com/questions/28683747/installing-gcc4-9-on-ubuntu-14-04-lts http://askubuntu.c ...

  9. django TypeError: 'module' object is not callable

    原因:导入模块时直接把模块当函数使用 from rest_framework import reverse #import reverse module @api_view(("GET&qu ...

  10. php开发客服系统(持久连接+轮询+反向ajax)

    欢迎在php严程序 - php教程学习AJAX教程, 本节课讲解:php开发客服系统(持久连接+轮询+反向ajax) php开发客服系统(下载源码) 用户端(可直接给客户发送消息)客服端(点击用户名. ...