码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2016-07-03 23:17:38      阅读：248      评论：0      收藏：0      [点我收藏+]

标签：

转自大地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>
技术分享

第十二种方法：

使用writing-mode

技术分享
 
<!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">
      div{
        width:500px;
        height:500px;
        line-height:500px;
        text-align:center;
        background:#B9D6FF;
        border:1px solid #f00;
      }
      div span{
        height:100%\9;
        writing-mode:tb-rl\9;
      }
      div img{
        vertical-align:middle
      }
    </style>


  </head>
  <body>
    <h1>垂直居中(writing-mode)</h1>
    <div class="container">
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/205314/r_iebug.jpg" />
      </span>
    </div>
  </body>
</html>
技术分享

第十三种方法： 使用button标签

技术分享
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        button {
            width: 400px;
            height: 400px;
            background: none;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <button><img src="http://placehold.it/200x200" /></button>
</body>
</html>
技术分享

 

第十四种方法：

这种方法其实还是采用的之前所述的方法中的两个做出来的，只是为了更好的向下兼容，采用了IE不支持的选择器

技术分享
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        body,html{
            height: 100%;
        }

        #outer {
            height: 100%;
            overflow: hidden;
            position: relative;
            width: 100%;
            background:ivory;
        }

        #outer[id] {
            display: table;
            position: static;
        }

        #middle {
            position: absolute;
            top: 50%;
        } /* for explorer only*/

        #middle[id] {
            display: table-cell;
            vertical-align: middle;
            position: static;
        }

        #inner {
            position: relative;
            top: -50%;
            width: 400px;
            margin: 0 auto;
        } /* for explorer only */

        div.greenBorder {
            border: 1px solid green;
            background-color: ivory;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="middle">
            <div id="inner" class="greenBorder"></div>
        </div>
    </div>
</body>
</html>
技术分享

 

第十五种方法： 淘宝的一个经典方法

技术分享
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            /*非IE的主流浏览器识别的垂直居中的方法*/
            display: table-cell;
            vertical-align:middle;

            /*设置水平居中*/
            text-align:center;

            /* 针对IE的Hack */
            *display: block;
            *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
            *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/

            width:200px;
            height:200px;
            border: 1px solid #eee;
        }
        .box img {
            /*设置图片垂直居中*/
            vertical-align:middle;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>
</body>
</html>
技术分享

 

第十六种方法： inline-block定位下，使用负数的margin

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

        .m-demo{
            width: 100%;
            height: 100%;
            font-size: 0;
            letter-spacing: -0.307em;
        }

        .m-demo > .one{
            margin-left:-50%;
            width: 100%;
            height: 100%;
            background-color: #FFFFFF;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            letter-spacing: normal;
        }

        .m-demo > .two{
            margin-left: -10%;
            width: 20%;
            height: 20%;
            background-color: #ff0000;
            display: -moz-inline-stack;
            display: inline-block;
            zoom: 1;
            letter-spacing: normal;
        }

        .center{
            vertical-align: middle;
        }

        .bottom{
            vertical-align:bottom;
        }

        .text-bottom{
            vertical-align:text-bottom;
        }

        .text-top{
            vertical-align:text-top;
        }

        .top{
            vertical-align:top;
        }

        .basline{
            vertical-align:baseline;
        }

    </style>
</head>
<body>
<div class="m-demo">
    <div class="one center"></div>
    <div class="two center" style="font-size:18px;">垂直居中元素</div>
</div>
</body>
</html>
技术分享

 

第十七种方法：

来自网易nec的一个方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<style type="text/css">
    html,body,.m-demo{
  width:100%;
  height:100%;
  margin:0;
}
 
.m-demo{
  position:relative;
  p{
    position:absolute;
    left:50%;
    top:50%;
  }
  img{
    &:nth-child(1){
      position:static;
      visibility:hidden;
    }
    &:nth-child(2){
      position:absolute;
      right:50%;
      bottom:50%;
    }
  }
}
</style>
 
<div class="m-demo">
  <p>
    <img src="http://nec.netease.com/img/s/1.jpg" />
    <img src="http://nec.netease.com/img/s/1.jpg" />
  </p>
</div>

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

　　 

其他方法：

技术分享
1、通过给内容元素一个（包含元素总宽度减去内容元素总宽度）的一半的margin-left和通过给内容元素一个（包含元素总高度减去图片总高度）的一半的margin-top的方式去居中。
2、通过给父元素一个上下相同的padding值，但是缺点是父元素不能固定高度。
3、jQuery或者js方法
4、水平居中：margin:0 auto;但是，如果你的Web页面没有明确声明"!DOCTYPE"，那么在IE也会以怪异模式解析你的Web页面，此时上面这种办法将无法让你的页面实现水平居中，但你可以使用下面这种方法解决这个bug。
body {
text-align: center;/*实现IE在怪异模式下页面水平居中*/
}
.container {
text-align: left;/*让文本恢复到左对齐*/
width: 960px;/*设置页面总宽度*/
margin: 0 auto;/*使页面水平居中对
}
5、使用负数一般元素宽度margin配合绝对定位left：50%实现水平居中
6、使用负数一般元素高度margin配合绝对定位top：50%实现垂直居中
技术分享

 

 

二、只能水平居中的方法：

第一种方法（除了能居中，还能居左，居右）：

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

.m-demo .cnt {
width: 150px;
height: 150px;
background-color: #FF0000;
}

.g-hriLft-3, .g-hriCtr-3, .g-hriRt-outer-3, .g-hriRt-inset-3 {
font-size: 0;
letter-spacing: -0.307em;
}

.g-hriLft-3:before, .g-hriCtr-3:before, .g-hriRt-outer-3:before, .g-hriRt-inset-3:before {
content: ‘&nbsp;‘;
font-size: 0;
}

.g-hriLft-3 .cnt, .g-hriCtr-3 .cnt, .g-hriRt-outer-3 .cnt, .g-hriRt-inset-3 .cnt {
display: inline-block;
position: absolute;
letter-spacing: normal;
}

.g-hriCtr-3 .cnt {
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}

.g-hriRt-inset-3 {
text-align: right;
direction: rtl;
}

.g-hriRt-outer-3 {
text-align: right;
}

.g-hriCtr-3 {
text-align: center;
}

.g-hriLft-3 {
text-align: left;
}
</style>
</head>
<body>
<div class="m-demo g-hriRt-outer-3">
<div class="cnt"></div>
</div>
</body>
</html>
技术分享

 

这个方法具体的解释详见张鑫旭博客：http://www.zhangxinxu.com/wordpress/2011/12/position-absolute-text-align-center/，还有很多细节没搞清楚，待我抽时间研究妥当

第二种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}

.m-demo-2 {
margin: 50px 0 50px 0;
width: 100%;
height: 48px;
outline: 1px solid #000000;
}

.m-demo-2 .w div {
padding: 20px;
background-color: #FF0000;
margin-left: 5px;
}

.g-hriCtr-1 {

overflow: hidden;

}

.g-hriCtr-1:after {
/*适用于水平居中的分页列表*/
content: ".";
clear: both;
display: block;
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}

.g-hriCtr-1 .g-ctr-w,
.g-hriCtr-1 .g-item {
float: left;
display: inline;
position: relative;
}

.g-hriCtr-1 .g-ctr-w {
left: 50%;
}

.g-hriCtr-1 .g-item {
right: 50%;
}

</style>
</head>
<body>

<div class="m-demo-2 g-hriCtr-1">
<div class="g-ctr-w w">
<div class="g-item" style="margin-left:0;"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
</div>
</div>

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

 

兼容性：包括IE6浏览器在内的主流浏览器都兼容 扩展性：子元素个数与大小都可扩展，父元素的高宽也可扩展。

这个方法的实现原理稍微有点绕脑筋，不过也还好，还不算难理解，不上图片，直接文字解释：

首先，给g-ctr-w 和g-item分别一个float：left，为的是让g-ctr-w和g-item的宽高都能收缩，这样，它们的大小形状就不是跟着元素的高宽走的了，而是跟着padding等除width和height外的布局属性走的了，因为float后的元素的高宽是可以收缩的，同时，给最外层的父元素清除浮动，这个不做解释，这个时候，g-ctr-w和g-item都跑到最外层父元素g-hriCtr-1的最左边去了，接下来看，如何给一个浮动的元素居中呢，其实，运用了之前的方法里面有的原理，首先分别给g-ctr-w和g-item一个position：relative，然后给g-ctr-w的left设置为50%，也就是相对于最外层父元素g-hriCtr-1往右偏移g-hriCtr的宽度一半的位移，这个时候g-ctr-w的左边就和最外层父元素g-hriCtr-1的中垂线对齐了，好，现在需要的就是让g-ctr-w往左偏移一段距离以让g-ctr-w看上去相对于最外层父元素g-hriCtr-1水平居中对齐，显然需要移动的距离是它自身宽度一半，但是你可以绞尽脑汁想想，是无论也没有一个固定的百分比值是可以让g-ctr-w总是居中的，但是，方法还是有的，我们可以给g-item的所有元素往左偏移它的父元素宽度的50%，也就是right:50%或者left:-50%,这里是用的right:50%，这样一来，看上去g-ctr-w就是相对于最外层父元素g-hrictr-1水平居中对齐了。

然后，这个高宽和子元素个数是可扩展的，但是在g-ctr-w的宽度扩展的比g-hriCtr-1的宽度一半还大时，g-hriCtr-1的父元素对超出元素的设置是超出部分显示滚动条的话，那就会出现滚动条，因此在这里，给g-hrictr-1一个overflow：hidden，将溢出空间隐藏，而g-ctr-w的的内容的宽度（包括margin）加起来比g-hrictr-1的宽度还大时，那么子元素g-item就会被挤下去。

也是个不错的方法

第三种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}

.m-demo-2 {
margin: 50px 0 50px 0;
width: 100%;
height: 48px;
outline: 1px solid #000000;
}

.m-demo-2 .w div {
padding: 20px;
background-color: #FF0000;
margin-left: 5px;
}

.g-hriCtr-2 {
position: relative;
}

.g-hriCtr-2 .g-ctr-w {
position: absolute;
left: 50%;
}

.g-hriCtr-2 .g-ctr-w .g-item {
float: left;
position: relative;
right: 50%;
}

</style>
</head>
<body>

<div class="m-demo-2 g-hriCtr-2">
<div class="g-ctr-w w">
<div class="g-item" style="margin-left:0;"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
<div class="g-item"></div>
</div>
</div>

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

 

兼容性：包括IE6在内的主流浏览器都兼容

扩展性：内容元素高宽、个数都可扩展，但是内容元素父容器.g-ctr-w只能容纳最外层.g-hriCtr-2的宽度一半的内容，否则内容元素就会被挤出去

第四种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}

.m-demo {
margin: 30px;
width: 400px;
height: 400px;
border: 1px solid #000000;
}

.m-demo div {
width: 150px;
height: 150px;
background-color: #FF0000;
}

.g-hriCtrFlex-1 {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizontal;
box-pack: center;
}
</style>
</head>
<body>

<div class="m-demo g-hriCtrFlex-1">
<div></div>
</div>

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

 

由于采用的是CSS3的flex，所以兼容性不佳，只考虑在手机端使用 高宽可扩展

第五种方法：

技术分享
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}

.m-demo-2 {
margin: 50px 0 50px 0;
width: 100%;
height: 48px;
outline: 1px solid #000000;
}

.m-demo-2 .w div {
padding: 20px;
background-color: #FF0000;
margin-left: 5px;
font-size: 18px;
}

.g-horCtrCSS3fitCotent {/*指定了width为fit-content的元素的width会随着子元素的实际宽度的扩展而扩展，配合margin-left:auto,margin-right：auto就能实现想要的效果*/
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
font-size: 0;
letter-spacing: -0.307em;
}

.g-horCtrCSS3fitCotent .g-item {
display: inline-block;
letter-spacing: normal;
}
</style>
</head>
<body>

<div class="m-demo-2 g-hriCtr-1">
<div class="w g-horCtrCSS3fitCotent">
<div class="g-item" style="margin-left:0;">前端工程师</div>
<div class="g-item">前端工程师</div>
<div class="g-item">前端工程师</div>
<div class="g-item">前端工程师</div>
<div class="g-item">前端工程师前端工程师前端工程师</div>
</div>
</div>

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

 

采用的CSS3的fit-content属性值，兼容性差，只考虑在手机端使用 子元素高宽可扩展

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

标签：

原文地址：http://www.cnblogs.com/zchbky/p/5639007.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！