产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云
联系我们
4008013260
售前咨询售后服务
其他服务
我要建议我要投诉
备案控制台
探索云世界
开发者社区 云原生 文章 正文

CSS布局：水平居中

2016-04-21 1487
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  一直对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>

目标元素宽度固定时　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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整体元素的样式变化。

文章标签：
前端开发
容器
关键词：
CSS布局
CSS水平居中
CSS水平
CSS居中
CSS布局水平居中
肥仔john
目录
相关文章
小周sir
|
12天前
|
前端开发 开发者 容器
彻底学会CSS grid网格布局
【4月更文挑战第1天】 彻底学会CSS grid网格布局
小周sir
14 0
远近高低各不同
|
1月前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
远近高低各不同
20 2
jcLee95
|
3月前
|
前端开发 JavaScript
Vue中使用纯CSS实现全屏网格加渐变色背景布局
Vue中使用纯CSS实现全屏网格加渐变色背景布局
jcLee95
71 0
叫我兔兔酱
|
3天前
|
前端开发 开发者 容器
【掰开揉碎】详解 CSS3 Grid 布局
【掰开揉碎】详解 CSS3 Grid 布局
叫我兔兔酱
18 0
N..
|
21天前
|
前端开发 容器
DIV+CSS网页布局
DIV+CSS网页布局
N..
8 0
游客762btuqu5wybw666
|
29天前
|
前端开发 UED 开发者
探索前端开发中的CSS布局技巧
本文将介绍一些在前端开发中常用的CSS布局技巧，包括盒模型、浮动布局、弹性布局和栅格系统等。通过学习这些技巧，开发者可以更加灵活地控制页面的布局，提升用户体验和界面的美观性。
游客762btuqu5wybw666
17 3
明月看潮生
|
1月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
明月看潮生
18 1
明月看潮生
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
明月看潮生
24 1
多加点香菜85
|
2月前
|
容器
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）, 以及适用场景？
多加点香菜85
18 0
多加点香菜85
|
2月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
多加点香菜85
21 1
为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告
产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理
解决方案技术解决方案
文档与社区文档开发者社区天池大赛培训与认证
权益中心免费试用高校计划企业扶持计划推荐返现计划
支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心
关注阿里云
关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务
阿里云APP阿里云微信
联系我们：4008013260
法律声明Cookies政策廉正举报安全举报联系我们加入我们
阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么
© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015
浙公网安备 33010602009975号浙B2-20080101-4