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

多兼容垂直居中，在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. bash shell，调用ffmpeg定期截图

    #!/bin/bash #获取当前目录中所有m3u8文件,并 var=$(ls |grep '.m3u8'|cut -d '.' -f1) #死循环 = ] do #循环每个文件 for stream ...

  2. Businessworks的设计思想

    Businessworks的设计思想基于一下三篇ATA: <从Eclipse平台看交易平台化>,强调微内核和扩展机制实现 <Google Guice平台模块化开发的果汁>,讨论 ...

  3. U盘容量变小的处理方式

    我就说一下win7下的步骤吧,xp应该差不多,管理员身份运行命令行(快捷键win+R), diskpart回车 list disk回车 看看你的u盘是哪一个,选择他(select disk X回车) ...

  4. 技术|程序员必须要学会Google搜索技巧

    程序员必须要学会Google搜索技巧 摘要: 因为Google在我天朝被墙,学FQ请通过Bing进行搜索如何FQGoogle搜索技巧我曾经多次劝我的另一个朋友花10分钟学习一下Google通配符的使用 ...

  5. C# HmacMD5 加密

    string HmacMD5(string source, string key) { HMACMD5 hmacmd = new HMACMD5(Encoding.Default.GetBytes(k ...

  6. [git]rebase和merge

    转自:http://blog.csdn.net/wh_19910525/article/details/7554489 Git merge是用来合并两个分支的. git merge b # 将b分支合 ...

  7. bug_ _

    java.lang.SecurityException: Not allowed to bind to service I app中加了百度定位功能,大部分手机测试没问题,但有部分手机会定位失败,提示 ...

  8. 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。（转）

    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...

  9. 前端网站helper

    聚合api 一.颜色类网站http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了.使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复 ...

  10. 同时使用Junit4的@Parameterized参数化测试和Spring容器

    转载:http://www.jianshu.com/p/d191fe54915f 整合Spring容器 @SpringApplicationConfiguration(classes = Applic ...