相信你都是在兼容垂直居中而烦恼，翻阅多个网站总是找不到理想的方法而苦恼，来到这里你的问题解决了！如果对你有帮助请点个赞，谢谢。

多兼容垂直居中，在IE6-9亲自测试并通过

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>不定高垂直居中(IE6+)</title>

<style>

html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}

/* 不定高垂直居中(IE6+) */

/* PS:<div class="valigner-fix"></div>必须要有，为了兼容 */

.valigner{/* 填写固定高度 */}

.valigner-fluid{display:table;width:100%;height:100%;min-height:100%}

.valigner-wrap{display:table-cell;vertical-align:middle;width:100%;height:100%}

.valigner-fix{display:none;width:1px;margin-left:-1px}

/* 以下可用<!--[if lte IE 7]><![endif]-->包含 */

.valigner-fix,.valigner-body{*display:inline-block;*vertical-align:middle}

.valigner-body{*width:100%}

.valigner-fix{*height:100%}

.valigner-fix,.valigner-body{*display:inline;/* 不能合并到上面 */}

</style>

</head>

<body>

<div class="valigner-fluid">

  <div class="valigner-wrap">

    <div class="valigner-body">

      不定高垂直居中(IE6+)

    </div>

    <div class="valigner-fix"></div>

  </div>

</div>

</body>

</html>

swiper的居中方案（CSS3），要求高

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>swiper的居中方案（CSS3）</title>

<style>

html, body {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

/* swiper的居中方案 */

.swiper-center {

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    -webkit-align-items: center;

    align-items: center;

    width: 100%;

    height: 100%;

}

.swiper-center-body {}

</style>

</head>

<body>

<div class="swiper-center">

  <div class="swiper-center-body">

    <p>swiper的居中方案（CSS3），要求高</p>

    <p>swiper的居中方案（CSS3），要求高</p>

  </div>

</div>

</body>

</html>

sencha的x-center居中方案（CSS3），要求高

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>sencha的x-center居中方案（CSS3）</title>

<style>

html, body {

    position: relative;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

/* sencha的.x-center */

.x-center {

    position: absolute;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    display: flex;

    display: -webkit-box;

    display: -ms-flexbox;

    -webkit-box-align: center;

    -ms-flex-align: center;

    align-items: center;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    justify-content: center;

}

.x-center>* {

    position: relative

}

.x-center-body {

}

</style>

</head>

<body>

<div class="x-center">

  <div class="x-center-body">sencha的x-center居中方案（CSS3），要求高</div>

</div>

</body>

</html>

[CSS]多浏览器兼容的垂直居中，兼容多个IE的更多相关文章

  1. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  2. placeholder兼容方法（兼容IE8以上浏览器）

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  3. 图文-水平垂直居中兼容ie6+

    图文-水平垂直居中兼容ie6+ 具体代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  4. 使用bootstrap本机调试时，应该使用本地服务器地址访问，如http://192.168.19.112/rjshop/，否则360浏览器会出现不兼容的情况

    使用bootstrap本机调试时,应该使用本地服务器地址访问,如http://192.168.19.112/rjshop/,否则360浏览器会出现不兼容的情况

  5. 在javascript中的浏览器兼容问题以及兼容浏览器汇总（默认事件，阻止冒泡，事件监听。。。）以及解决方式详解

    在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级   渐进增强(progressive enhancement): 针对低版本浏览器进 ...

  6. 存在不同浏览器间的JS兼容总结

    2016年2月19日个人博客文章--迁移到segmentfault 当我们在编写JS用于处理事件时,由于考虑到不同浏览器间Js代码兼容不同,代码不易记忆,于是做出如下整理.(当然以后还会增加更新的.. ...

  7. CSS对浏览器的兼容性(IE和Firefox)技巧整理

    CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

  8. css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

    css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right ...

  9. CSS对浏览器的兼容性常见处理方式小结

    CSS技巧 1.div的垂直居中问题: vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了. 缺点:要控制内 ...

  10. css跨浏览器大全

    CSS技巧1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要 ...

随机推荐

  1. Ninject使用介绍

    #region 第二种写法 /// <summary> /// using(IKernel tKernel=new StandardKernel(new PeoKernelServer() ...

  2. Lab_2_SysOps_VPC_Linux_v2.5

    System Operations - Lab 2: Configuring a Virtual Private Cloud with Amazon VPC - Linux - 2.5 ======= ...

  3. day24：面向对象设计与面向对象编程、类和对象

    一.三大编程范式: 面向过程: 面向函数: 面向对象: 二.程序的进化论: 1.编程最开始就是无组织无结构,从简单控制流中按步写指令 2.从上述的指令中提取重复的代码块或逻辑,组织到一起(比方说,你定 ...

  4. How Garbage Collection Really Works

    Java Memory Management, with its built-in garbage collection, is one of the language's finest achiev ...

  5. MySQL绿色版的安装（mysql-5.6.22-win32.zip）

    1.数据库下载 Mysql官方网站:http://www.mysql.com/,数据库下载地址:http://www.mysql.com/downloads/.从官方网站可以找到两种文件包,一种是ex ...

  6. 可重入锁 公平锁 读写锁、CLH队列、CLH队列锁、自旋锁、排队自旋锁、MCS锁、CLH锁

    1.可重入锁 如果锁具备可重入性,则称作为可重入锁. ========================================== (转)可重入和不可重入 2011-10-04 21:38 这 ...

  7. 最小安装模式下Centos7.*网卡启动配置

    最小安装模式下的Centos7.*系统默认情况下,网卡是不启动的.为了解决联网问题,自己搜集了点资料,成功连接了网络.并梳理了下处理过程. 1.首先运行ip addr命令,查看配置文件的名称.有的文章 ...

  8. Linux文件权限

    Permission deny 权限 拒绝   查看权限 ls -a ls -la expression 查看文件夹里边东西的权限   用户群的分类 组群:一个操作系统可能几个人同时用 方便小组的文件 ...

  9. xcode 插件地址

    http://finalshares.com/read-1104 curl -fsSL https://raw.githubusercontent.com/supermarin/Alcatraz/de ...

  10. Java的常用对象①②

    Java的常用对象① Java的常用对象有很多,这里只对lang包中常用的Object,Date(Calendar,DateFormat,Math),System,Runtime进行介绍.㈠Objec ...