CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  一直对CSS布局一知半解，这段时间打算定下心来好好学习一下，于是先从最简单的水平居中布局开始入手。下面以分页组件为实例来记录各种实现方式。

common.css

 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/