CSS布局：水平居中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS布局：水平居中相关的知识，希望对你有一定的参考价值。

原文: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;
  width: 300px;
}
.navbar li{
  float: left;
}
.navbar li + li {
  margin-left: 10px;
}
</style>

兼容性：All browser!

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变化也会导致该元素的宽度变化）。

宽度自适应时　　　　　　　　　　　　　　　　　　　　　　　　

对于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>

 

总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  尊重原创，转载请注明来自：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/

 
















以上是关于CSS布局：水平居中的主要内容，如果未能解决你的问题，请参考以下文章

css基础 CSS 布局 – OverflowFloat 浮动CSS 布局 – 水平 垂直居中对齐

css实现水平/垂直居中效果

CSS代码片段

CSS代码片段

css 怎么实现 div水平居中 呢？

CSS 水平+垂直居中布局