《转》CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了《转》CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）相关的知识，希望对你有一定的参考价值。

转自大地Dudy的CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）

本文主要是对主流居中方法进行了归纳，有些地方甚至就是把别人的代码直接复制过来的，没有什么自己的东西，除了大漠以及张鑫旭的方法外，还有来自司徒正美、怿飞博客的几个方法

以下方法，由于测试环境的原因，IE系列只测试了IE9和IE6，以下所说的IE的支持性只是相对于IE9和IE6来说的：

一、元素的水平垂直居中：

第一种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
margin: 60px 0 0 100px;
width: 500px;
height: 500px;
border: 1px solid #000000;
}

.m-demo div {
width: 200px;
height: 200px;
border: 1px solid #FF0000;
}

.g-BothCtr-1 {
position: relative;
}

.g-BothCtr-1 .cnt {
margin: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="m-demo g-BothCtr-1">
<div class="cnt"></div>
</div>
</body>
</html>
技术分享

 

如果想让内容块在贴近侧边的过程中保持水平居中，可以使用right: 0; left: auto; 让内容贴在右侧，或者使用left: 0; right: auto; 使内容贴在左侧。top和bottom同理 扩展性：父元素宽高改变，子元素仍然居中，但是子元素只能固定宽高 兼容性：主流浏览器均支持，IE6不支持

这种对子元素水平垂直居中的方法兼容性很好，但是缺点是其一它需要让父元素相对定位才行，其二子元素必须为固定宽高

第二种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
margin: 60px 0 0 100px;
width: 500px;
height: 500px;
border: 1px solid #000000;
}

.m-demo div {
width: 200px;
height: 200px;
border: 1px solid #FF0000;
}

.g-BothCtr-2 {
text-align: center;
font-size: 0;
letter-spacing: -0.307em;
}

.g-BothCtr-2:before, .g-BothCtr-2 .cnt {
vertical-align: middle;
display: inline-block;
}

.g-BothCtr-2 .cnt {
letter-spacing: normal;
}

.g-BothCtr-2:before {
content: ‘‘;
width: 0;
height: 100%;
}
</style>
</head>
<body>
<div class="m-demo g-BothCtr-2">
<div class="cnt"></div>
</div>
</body>
</html>
技术分享

 

/*IE6、7不支持content属性*/ 扩展性：无论子元素还是父元素，元素宽高改变，子元素仍然居中 兼容性：主流浏览器均支持，IE6不支持

这种方法的缺点是子元素必须要是inline-block或者inline的元素，不能改变它的display：inline-block，也就是说子元素不能绝对定位，浮动，display设置为block

第三种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
margin: 60px 0 0 100px;
width: 500px;
height: 500px;
border: 1px solid #000000;
}

.m-demo div {
width: 200px;
height: 200px;
border: 1px solid #FF0000;
}

.g-BothCtr-3 {
/*对包含元素浮动的情况不适用，IE6、7不兼容*/
display: table-cell;
text-align: center;
vertical-align: middle;
}

.g-BothCtr-3 .cnt {
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<div class="m-demo g-BothCtr-3">
<div class="cnt"></div>
</div>
</body>
</html>
技术分享

 

扩展性：无论子元素还是父元素，元素宽高改变，子元素仍然居中 由于display:table-cell的原因，IE6\\7不兼容

这种方法扩展性还可以，但是无论父元素还是子元素都不能浮动，如果父元素浮动，元素就只能水平居中，如果子元素浮动，则子元素按照浮动的方向走

第四种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
height: 300px; /*高度值不能少*/
width: 300px; /*宽度值不能少*/
border: 1px solid #000000;

}

.g-BothCtr-4 {
display: table;
position: relative;
float: left; /*可不浮动，也可浮动*/
}

.g-BothCtr-4 .tableCell {
display: table-cell;
vertical-align: middle;
text-align: center;
*position: absolute;
*top: 50%;
*left: 50%;
}

.g-BothCtr-4 .cnt {

vertical-align: center;

display: inline-block;

*position: relative;
*top: -50%;
*left: -50%;
}

/*需要注意的是，使用这种方法，如果你的居中元素是放在body中的话，你需要给html,body设置一个“height:100%”的属性。*/
</style>
</head>
<body>
<div class="m-demo g-BothCtr-4">
<div class="tableCell">
<div class="cnt">content</div>
</div>
</div>
</body>
</html>
技术分享

 

兼容性：兼容IE6

扩展性：无论子元素还是父元素，高苦都可扩展

这种方法比上一种方法多了一个模拟table的盒子div，上面那个直接就是table-cell，因此这个是支持最外层父元素的浮动的。

这个的实现原理呢，是让最外层的元素一个display:table模拟表格，然后让内容元素的直接父元素也就是最外层父元素的下一级一个display:table-cell，让它模拟表格单元格的行为，结合text-align:center和vertical-align:middle结合子元素display:inline-block让它的子元素也就是内容元素水平垂直居中，然后IE6\\7不支持table-cell怎么办呢，方法就是针对IE6\\7给内容元素的直接父元素一个position:absolute，left:50%，top：50%，让它相对于最外层父元素绝对定位水平和垂直偏移50%，这个时候它的左边就和父元素的垂直基线对齐了，然后再给内容元素以position:relative，left：-50%，top：-50%；让内容元素相对于它的直接父元素往左和往上分别偏移它的直接父元素一半的距离，这个时候内容元素也就相对于最外层父元素居中了。

为什么一共需要三层标签，其一是构建table和table-cell的需要。其二，为了能够更好的在IE6\\7上利用上述定位的原理进行居中。可谓一举两得，这个方法可以好好理解下

第五种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
margin: 50px;
width: 600px;
height: 600px;
border: 1px solid #000000;
}

.m-demo .secont {
width: 200px;
height: 200px;
background-color: #FF0000;
}

.g-horCtrHtml-1 {
text-align: center;
font-size: 0;
letter-spacing: -0.307em;
*letter-spacing: normal;
*word-spacing: -1px;
}

.g-horCtrHtml-1 .empty {
width: 100%;
height: 50%;
margin-bottom: -100px; /*配置参数，内容元素高度的一半*/
}

.g-horCtrHtml-1 .cnt {

display: inline-block;
*letter-spacing: normal;

*word-spacing: normal;
*display: inline;
*zoom: 1;
}
</style>
</head>
<body>
<div class="m-demo g-horCtrHtml-1">
<div class="empty"><!--空的内容--></div>
<div class="secont cnt">实际内容</div>
</div>
</body>
</html>
技术分享

 

兼容性：包括IE6在内的主流浏览器都兼容 扩展性：高宽都不可扩展

这种方法虽然多了一层标签，但是兼容性好，项目中如果需要兼容IE6\\7，可以考虑使用此方法

第六种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.m-demo {
margin: 50px;
width: 600px;
height: 600px;
border: 1px solid #000000;
}

.m-demo .secont {
width: 200px;
height: 200px;
background-color: #FF0000;
}

.g-horCtrHtml-1 {
text-align: center;
font-size: 0;
letter-spacing: -0.307em;
}

.g-horCtrHtml-1:before {
content: "";
display: block;
width: 100%;
height: 50%;
margin-bottom: -100px; /*配置参数，为内容元素高度一半*/
}

.g-horCtrHtml-1 .cnt {
display: inline-block;
letter-spacing: normal;
}
</style>
</head>
<body>

<div class="m-demo g-horCtrHtml-1">
<div class="secont cnt"></div>
</div>

</body>
</html>
技术分享

 

兼容性：不兼容IE6\\7 扩展性：高宽都不可扩展

这个方法只是上面那个方法的after伪元素版本，把空的标签换成了用after伪元素装载的content，由于不需要兼容IE6\\7，去掉了那些hack代码

 

第七种方法：

使用CSS3的calc（）函数

技术分享
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{
            width: 100%;
            height: 100%;
        }

        .m-demo{
            position: relative;
            width: 100%;
            height: 100%;
            background-color: #000000;
        }

        .m-demo > div{
            position: absolute;
            left: calc(50% - 15%);//50%和15%都是相对于父元素的，所以意思就是先过去50%，再拉回来15%，而这个15%又刚好是父元素宽度一半
            top: calc(50% - 15%);//原理同上
            width: 30%;
            height: 30%;
            background-color: #FF0000;
        }

          /*.m-demo > div{               position: absolute;//这种固定宽高的也是可以用calc计算的，原理同上               left: calc(50% - 400px /2);               top: calc(50% - 400px / 2);               width: 400px;               height: 400px;               background-color: #FF0000;           }*/

</style>
</head>
<body>
    <div class="m-demo">
        <div></div>
    </div>
</body>
</html>
技术分享

兼容性：兼容性差，只有最新浏览器才支持 扩展性：高宽不可扩展

 

第八种方法：

使用sass

前面介绍的使用CSS3的calc（）的方法，一定程度上也是可以用sass替代的，但不是全部，因为不同单位值之间的运算，sass语法是不允许的，所以上面的(50% - 400px /2)，sass就是运算不了的。

技术分享
@charset "utf-8";

html,body{position:absolute; width:100%; height: 100%; margin:0;}

.pg-shiyan-1{
  width: 100%;
  height: 100%;
  .m-demo{
    position: relative;
    width: 100%;
    height: 100%;
    >div{
      position: absolute;
      left:50% - 20%;
      top:50% - 20%;
      width:40%;
      height: 40%;
      background-color: #FF0000;
    }
  }

}
技术分享

兼容性：兼容性本身只与css有关系，与sass没关系，这里是兼容IE6的 扩展性：高宽不可扩展

 

第九种方法：

使用table标签

技术分享
 
<!doctype html>
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
    <title>CSS垂直居中</title>  
    <style type="text/css">  
      .container{  
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      
    </style>  
  </head>  
  <body>  
    <h1>垂直居中（table）</h1>  
    <div class=‘container‘>
        <table width="100%" height="100%">
            <tr>
               <td align="center" valign="middle">
                  <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
               </td>
           </tr>
       </table> 
   </div>
    
  </body>  
</html>
技术分享

第十种方法：

使用背景图片

技术分享
 
<!doctype html>
<html>
<head>
<title>司徒正美 CSS垂直居中</title>
<style type="text/css">
.container {
  width:500px;
  height:500px;
  line-height:500px;
  background:#B9D6FF url(http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg)  no-repeat center center;
  border:1px solid #f00;
  text-align: center;
}

</style>

</head>
<body>
<h1>垂直居中（背景图片法）</h1>
<div class="container">
   
</div>
</body>
</html>
技术分享

 

第十一种方法：

技术分享
 
<html lang="en">  
  <head>  
    <meta charset="utf-8" />  
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>  
    <title>CSS垂直居中</title>  
    <style type="text/css">  
      .container{  
        /*IE8与标准游览器垂直对齐*/
        display: table-cell;
        vertical-align:middle; 
        width:500px;/*装饰*/
        height:500px;  
        background:#B9D6FF;  
        border: 1px solid #CCC;  
      }  
      .container img{  
        display:block;/*让其具备盒子模型*/
        margin:0 auto;  
        text-align:center;
        margin-top:expression((500 - this.height )/2);/*让IE567垂直对齐 */
      }  
    </style>  
  </head>  
  <body>  
    <h1>垂直居中（CSS表达式）</h1>  
    <div class="container">  
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />  
    </div>  
  </body>  
</html>

以上是关于《转》CSS元素水平垂直居中方法总结（主要对大漠以及张鑫旭博客所述方法进行了归纳）的主要内容，如果未能解决你的问题，请参考以下文章

CSS水平居中+垂直居中+水平/垂直居中的方法总结

CSS_水平垂直居中总结

CSS之元素水平居中

CSS水平居中与垂直居中的总结

CSS水平垂直居中常见方法总结

CSS水平垂直居中常见方法总结2