CSS元素水平垂直居中方法總結（主要對大漠以及張鑫旭博客所述方法進行了概括）

時間 2019-11-19

標籤 css 元素水平垂直居中方法總結主要大漠以及博客所述進行概括欄目 CSS 简体版

原文原文鏈接

本文主要是對主流居中方法進行了概括，有些地方甚至就是把別人的代碼直接複製過來的，沒有什麼本身的東西，除了大漠以及張鑫旭的方法外，還有來自司徒正美、懌飛博客的幾個方法css

如下方法，因爲測試環境的緣由，IE系列只測試了IE9和IE6，如下所說的IE的支持性只是相對於IE9和IE6來講的：html

1、元素的水平垂直居中：前端

第一種方法：web

<!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不支持express

這種對子元素水平垂直居中的方法兼容性很好，可是缺點是其一它須要讓父元素相對定位才行，其二子元素必須爲固定寬高瀏覽器

第二種方法：sass

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

/*IE六、7不支持content屬性*/
擴展性：不管子元素仍是父元素，元素寬高改變，子元素仍然居中
兼容性：主流瀏覽器均支持，IE6不支持ruby

這種方法的缺點是子元素必需要是inline-block或者inline的元素，不能改變它的display：inline-block，也就是說子元素不能絕對定位，浮動，display設置爲block前端工程師

第三種方法：wordpress

<!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 {
/*對包含元素浮動的狀況不適用，IE六、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的一個方法

<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" alt="" />
    <img src="http://nec.netease.com/img/s/1.jpg" alt="" />
  </p>
</div>

擴展性：高寬可擴展
兼容性：兼容包括IE6在內的主流瀏覽器

其餘方法：

一、經過給內容元素一個（包含元素總寬度減去內容元素總寬度）的一半的margin-left和經過給內容元素一個（包含元素總高度減去圖片總高度）的一半的margin-top的方式去居中。
二、經過給父元素一個上下相同的padding值，可是缺點是父元素不能固定高度。
三、jQuery或者js方法
四、水平居中：margin:0 auto;可是，若是你的Web頁面沒有明確聲明"!DOCTYPE"，那麼在IE也會以怪異模式解析你的Web頁面，此時上面這種辦法將沒法讓你的頁面實現水平居中，但你可使用下面這種方法解決這個bug。
body {
text-align: center;/*實現IE在怪異模式下頁面水平居中*/
}
.container {
text-align: left;/*讓文本恢復到左對齊*/
width: 960px;/*設置頁面總寬度*/
margin: 0 auto;/*使頁面水平居中對
}
五、使用負數通常元素寬度margin配合絕對定位left：50%實現水平居中
六、使用負數通常元素高度margin配合絕對定位top：50%實現垂直居中

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

第一種方法（除了能居中，還能居左，居右）：

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