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

多兼容垂直居中，在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. DBA-mysql-字符集

    查看支持的字符集:show charset; 查看现使用字符集:status; 1.在[mysqld]下添加 default-character-set=utf8 (mysql 5.1版本) char ...

  2. Mysql 安装-操作-备份

    Mysql 5.7 安装windows 1.配置mysql的path->系统属性->环境变量-path添加最后 2.配置目录和主从 [mysqld]port = 3306 basedir= ...

  3. android模拟器没法通过localhost访问本地服务器的解决

    当android项目访问在一台服务器上的WEB服务时,没法通过localhost或者127.0.0.1来访问.模拟器把它自己作为了localhost,代码中使用localhost或者127.0.0.1 ...

  4. WCF部署于IIS使用的几个问题总结

    Q:wcf 远程服务器返回错误: (405) 不允许的方法. A: new SqlServerOperateClient("BasicHttpBinding_ISqlServerOperat ...

  5. [SPI]SPI协议详解

    转自:https://my.oschina.net/freeblues/blog/67400 1.SPI协议简介 1.1.SPI协议概括 SPI,是英语Serial Peripheral interf ...

  6. asp.net解决高并发的方案.[转]

    最近几天一直在读代震军的博客,他是Discuz!NT的设计者,读了他的一系列关于Discuz!NT的架构设计文章,大呼过瘾,特别是Discuz!NT在解决高访问高并发时所设计的一系列方案,本人尤其感兴 ...

  7. javascript判断某种元素是否进入可视区域

    判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域 找到几个关键因素: sTop= $(window).scrollTop();  //滚动条距顶部的高度 clientHeight= ...

  8. Bower 自定义组件文件夹名称

    默认情况下, bower 会自动把文件安装在文件夹 bower_components 下面,如果希望自定义这个文件夹的名称为 components ,可以创建一个名称为 ".bowerrc& ...

  9. CreateIoCompletionPort() 函数

    /* ********************* * CreateIoCompletionPort() 函数有两个功能: * 1.创建一个完成端口: * 2.将一个设备与一个存在的完成端口进行绑定,在 ...

  10. 栈，队列的java实现

    介绍 http://501565246-qq-com.iteye.com/blog/2047078 实现: http://blog.csdn.net/zsw101259/article/details ...