[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>

秒客网

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

相关文章