CSS布局：水平居中

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

一直对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;
   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;
   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;
   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 + 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;
  intrinsic; /* For Safari, see https://developer.mozilla.org/en-US/docs/CSS/width */
  -moz-fit-content;
  -webkit-fit-content;
  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/

相关阅读:
HDU4507 吉哥系列故事――恨7不成妻（数位dp）
UCF Local Programming Contest 2017 G题（dp）
ICPC Latin American Regional Contests 2019 I题
 UCF Local Programming Contest 2017 H题（区间dp）
HDU2089 不要62
AcWing1084 数字游戏II（数位dp）
UCF Local Programming Contest 2017 F题（最短路）
Google Code Jam 2019 Round 1A Pylons（爆搜+贪心）
AcWing1083 Windy数（数位dp）
Vue
原文地址：https://www.cnblogs.com/fsjohnhuang/p/5237172.html

热门文章
Scapegoat
排序方法
 HTTP和HTTPS的区别?
docker
ElasticSearch
Oracle 存储过程实例
 Oracle 存储过程
 Oracle 游标
 索引
 视图