CSS布局：水平居中 - fsjohnhuang－IT工程師數位筆記本

文章出處

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

一直對CSS布局一知半解，這段時間打算定下心來好好學習一下，于是先從最簡單的水平居中布局開始入手。下面以分頁組件為實例來記錄各種實現方式。

common.css

<style type="text/css">
  ul,li{list-style:none;margin:0;padding:0;}
  body{
    background:#888;
    font-size:14px;
    color:#F2F2F2;
    text-shadow:1px 0 0 #101011;
  }
  .item{
    padding: 0 10px;
    border-radius: 2px;
    box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
    background: #555;
    background: -webkit-linear-gradient(top,#434345,#2f3032);
  }
</style>

View Code

目標元素寬度固定時　　　　　　　　　　　　　　　　　　　　　　　　　　　　

1. display:block + margin: 0 auto

HTML Markup

<ul class="navbar">
  <li class="item">Prev</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">Next</li>
</ul>

CSS

<style type="text/css">
.navbar{
  margin: 0 auto;
  display: block;
  width: 300px;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：All browser!
采用盒模型本身的margin來布局不會引起reflow。

2. display:block + <center></center>

HTML Markup

<center>
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</center>

CSS

<style type="text/css">
.navbar{
  display: block;
  width: 300px;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：All browser!
HTML5 不支持 <center> 標簽，HTML 4.01 已廢棄 <center> 標簽

優點：當元素寬度固定，無需根據其內容/子元素變化時，原理和實現十分簡單高效。
缺點：當元素寬度需根據其內容/子元素變化時（該元素及其子元素的font變化也會導致該元素的寬度變化）。

3. 若父元素和目標元素寬度均固定時，可采用盒模型自身的padding來布局

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  display: block;
  width: 600px;
}
.navbar{
  display: block;
  box-sizing: border-box;
  padding: 0 150px;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

目標元素寬度自適應時　　　　　　　　　　　　　　　　　　　　　　　　

對于non-replaced element而言

1. display:table + <center></center>

HTML Markup

<center>
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</center>

CSS

<style type="text/css">
.navbar{
  display: table;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：All browser!
HTML5 不支持 <center> 標簽，HTML 4.01 已廢棄 <center> 標簽

2. display:table + margin: 0 auto

HTML Markup

<ul class="navbar">
  <li class="item">Prev</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">Next</li>
</ul>

CSS

<style type="text/css">
.navbar{
  margin: 0 auto;
  display: table;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：IE8+
若子元素間無間隔時，可將 .navbar li{float:left;} 改為 .navbar li{display:table-cell;}

3. display:block + margin: 0 auto + width:fit-content

HTML Markup

<ul class="navbar">
  <li class="item">Prev</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">Next</li>
</ul>

CSS

<style type="text/css">
.navbar{
  margin: 0 auto;
  display: block;
  width:intrinsic; /* For Safari, see https://developer.mozilla.org/en-US/docs/CSS/width */
  width:-moz-fit-content;
  width:-webkit-fit-content;
  width:fit-content;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：No IE
fit-content是CSS3中width的新增屬性值，表示容器元素寬度自適應子元素。

4. text-align:center + display:inline-block

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  text-align: center;
}
.navbar{
  display: inline-block;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：IE8+
通過CSShack可兼容IE6/7

.navbar{
  *display: inline;
  zoom: 1;
}

注意：容器元素設置為display:inline-block時，會被設置為float的子元素撐大。

5. float:left + position:relative

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  display:block;    /* 保證.navbar定位是相對于所屬容器的寬度 */
  overflow: hidden; /* 防止.navbar定位+寬度大于容器寬度時，產生水平滾動條 */
}
.navbar{
  position:relative;

  float:left;
  left: 50%;  /* 相對.container寬度定位 */
}
.navbar li{
  position:relative;

  float: left;
  left: -50%; /* 相對.navbar寬度定位 */
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：For all browser!

6. position:absolute + position:relative

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  display:block;    /* 保證.navbar定位是相對于所屬容器的寬度 */
  overflow: hidden; /* 防止.navbar定位+寬度大于容器寬度時，產生水平滾動條 */
}
.navbar{
  position:absolute;

  left: 50%;  /* 相對.container寬度定位 */
}
.navbar li{
  position:relative;

  float: left;
  left: -50%; /* 相對.navbar寬度定位 */
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：For all browser!

7. float:left + transform:translate(-50%,0)

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  display:block;    /* 保證.navbar定位是相對于所屬容器的寬度 */
  overflow: hidden; /* 防止.navbar定位+寬度大于容器寬度時，產生水平滾動條 */
}
.navbar{
  float:left;

  position:relative;
  left: 50%;  /* 相對.container寬度定位 */

  /* 相對.navbar寬度定位 */
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：IE9+

8. display:box

HTML Markup

<ul class="navbar">
  <li class="item">Prev</li>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">Next</li>
</ul>

CSS

<style type="text/css">
.navbar{
  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;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：IE10+

9. text-align:center + display:inline-box

HTML Markup

<div class="container">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</div>

CSS

<style type="text/css">
.container{
  text-align: center;
}
.navbar{
  display:-webkit-inline-box;
  display:-moz-inline-box;
  display:-ms-inline-flexbox;
  display:-webkit-inline-flex;
  display:inline-flex;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：IE10+

對于replaced element而言

直接采用 display:block + margin: 0 auto 即可。

HTML Markup

<img src="./john.png"/>
<input type="text"/>

CSS

<style type="text/css">
img,input{
  display:block;
  margin: 0 auto;
}
</style>

奇技淫招

既然replaced element實現寬度自適應居中如此簡單，那我們可否以replaced element為容器包裹目標元素呢？這時我們將目光投到button標簽了:)

HTML Markup

<button class="container" onmousedown="return false;">
  <ul class="navbar">
    <li class="item">Prev</li>
    <li class="item"><a href="#">1</a></li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">Next</li>
  </ul>
</button>

CSS

<style type="text/css">
.container{
  /* button自帶樣式，且不會繼承父節點的樣式，因此需作樣式重置 */
  border: none 0;
  background:#888;
  font-size:14px;
  color:#F2F2F2;
  text-shadow:1px 0 0 #101011;

  display: block;
  margin: 0 auto;
}
/* 消除獲取焦點后出現的外邊框 */
.container:focus{
  outline: none;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

雖然采用button作為殼實現水平居中代碼簡單，但會引發其他問題：

1. button不會繼承父節點的樣式，需作樣式重置——導致CSS片段重復；

2. 在IE下button內的a元素樣式全丟，且點擊時不會打開新網頁，需要通過click事件處理button內元素的點擊操作；

3. 在IE下需要通過onmousedown="return false"來清除點擊時button整體元素的樣式變化。

總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/5237172.html^_^肥子John

感謝　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
http://www.456bereastreet.com/archive/201303/how_to_shrinkwrap_and_center_elements_horizontally/
http://www.w3cplus.com/css/elements-horizontally-center-with-css.html
http://zxc0328.github.io/2015/05/21/centering-all-the-directions/

http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/

文章列表