cy cycold

Absolute Centering

Perfect horizontal AND vertical centering in CSS, at any width or height!

Works with percentage based width/height, min-/max- width, images, position: fixed and even variable content heights.

Updated Aug 13: Added a comparison table, an explanation, more documentation, and a Modernizr test for variable height

Updated Aug 16: Minor corrections and clarifications

webkit & firefox

This is for teaching purpose.

	<style>
	.calender{

	}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<div class="calender">
	<div class="selectmouth">
	<a class="lastmonth"> < </a>
	<input type="text" class="selectdate" value="2014年2月" readonly=readonly >

	// function startMove(obj,attr,iTarget,fnEnd){ //多个参数使用json格式
	function startMove(obj,json,fnEnd){
	clearInterval(obj.timer);
	obj.timer = setInterval(function(){
	var flag = true; //标志位假设所有的值都到位了
	for(var attr in json){
	var cur = 0;
	//对透明度做一个判断
	if(attr == "opacity"){
	// var cur = parseFloat(getStyle(obj,attr))*100; //使用paseFloat保留小数同时习惯使用100的透明度

	var webRoot = "./";

	//初始化默认设置
	$.ui.animateHeaders = false; //禁止头部动画
	$.ui.useOSThemes = false; //禁止自动选择皮肤
	$.ui.autoLaunch = false; //自动初始化
	$.ui.openLinksNewTab = false; //禁止在新窗口打开页面？
	$.ui.splitview = false; //禁止大于某个分辨率自动展开菜单
	$.ui.resetScrollers = false; //后退禁止页面回到顶部
	$.ui.backButtonText = " "; //设置后退按钮文字

	<span class="single-line" onclick="toggleCornerBox(event,this)">品牌删选</span>
	//显示酒店筛选
	function toggleCornerBox(event,obj){
	console.log(event);

	if (window.event) {
	event.cancelBubble=true;
	} else {
	//event.preventDefault();
	event.stopPropagation();

	onclick="loadPanel(this,{'name':'er','age':'12'})"
	json = {'name':'er','age':'12'} //输出直接就是jsond对像

	onclick='loadPanel(this,"{\"name\":\"er\"}")'
	json = "{\"name\":\"er\"}") //输出是json字符串

	function loadPanel(obj,json){
	console.log(json);
	var json = eval('(' + json + ')');
	console.log(json);

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];

	@charset "utf-8";
	//注意animate keyframe 不能嵌套
	@include animate-flipOutY;

	>h1{
	width: 200px;
	height: 200px;
	background-color: green;
	@include ceaser-transition(all , 600ms, $easeInOutBack);
	//@include transition(all 600ms ceaser($easeInOutBack));