[CSS]多浏览器兼容的垂直居中，兼容多个IE

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

多兼容垂直居中，在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>

 

posted @ 2015-12-08 21:40  炎峰森林影  阅读(601)  评论(0)  编辑  收藏  举报