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

多兼容垂直居中，在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. OC 单元测试学习笔记

    UnitTest 编译异常汇总: 问题1 Check dependencies No architectures to compile for (ONLY_ACTIVE_ARCH=YES, activ ...

  2. Stream 和 byte[] 之间的转换

    Stream 和 byte[] 之间的转换 一. 二进制转换成图片 ? 1 2 3 4 5 MemoryStream ms = new MemoryStream(bytes); ms.Position ...

  3. [LeetCode] 10. Regular Expression Matching

    Implement regular expression matching with support for '.' and '*'. DP: public class Solution { publ ...

  4. Adobe 软件防止联网激活更改Hosts文件

    来自为知笔记(Wiz) 附件列表

  5. Python的第一天

    一.Python的简介 Python诞生于作者是Guido van Rossum,Python来自Guido所挚爱的电视剧Monty Python's Flying Circus (BBC1960-1 ...

  6. 设置树莓派3 B+的静态IP

    修改/etc/dhcpcd.conf 文件 sudo vim /etc/dhcpcd.conf interface eth0 static ip_address= static routers=192 ...

  7. vs 配置宏

    Win_$(PROCESSOR_ARCHITECTURE)_$(PlatformArchitecture) <==> Win_x86_64 OR Win_x86_32$(Configura ...

  8. ESXi Install OpenWRT

    根据官方的提示,下载的img镜像需要转换为vmdk. 地址:http://wiki.openwrt.org/doc/howto/vmware 转换需要qemu-utils,网上的安装方法: #64位系 ...

  9. XE7 & IOS开发之开发账号（2）：发布证书、发布授权profile的申请使用，附Ad hoc真机调试、生成ipa文件演示（XCode所有版本通用，有图有真相）

    网上能找到的关于Delphi XE系列的移动开发的相关文章甚少,本文尽量以详细的图文内容.傻瓜式的表达来告诉你想要的答案. 原创作品,请尊重作者劳动成果,转载请注明出处!!! 注意,以下讨论都是以&q ...

  10. jQuery 中对 CommonJs 的支持处理

    jQuery 中对 CommonJs提供了直接支持,可以在 CommonJs模块中直接引用 jQuery 对象,这是如何实现的呢? 从 factory 函数说起 说先看 jQuery 的主体函数定义, ...