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!
采用盒模型本身的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  */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" οnmοusedοwn="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下需要通过οnmοusedοwn="return false"来清除点击时button整体元素的样式变化。

 

总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  尊重原创，转载请注明来自：.html^_^肥子John

感谢　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
/
.html
/

/

 

如果您觉得本文的内容有趣就扫一下吧！捐赠互勉！

分类: CSS 好文要顶 关注我 收藏该文 ^_^肥仔John
关注 - 85
粉丝 - 707 +加关注 4 0 « 上一篇： JS魔法堂：判断节点位置关系
» 下一篇： .Net魔法堂：开启IIS的WebGarden、WebFarm和StateServer之旅
posted @ 2016-03-03 08:58 ^_^肥仔John 阅读( 3797) 评论( 2) 编辑 收藏 评论列表 #1楼 2016-03-03 09:48 愤怒的TryCatch 老朽不是专前端的，
不过博主一个居中定位居然能说出这么多的知识点，前端不简单~
受教了！ 支持(0) 反对(0) .png #2楼 3370932 2016/3/3 11:19:31 2016-03-03 11:19 松柏长青 mark 支持(0) 反对(0) 刷新评论 刷新页面 返回顶部 注册用户登录后才能发表评论，请 登录 或 注册， 访问网站首页。 【推荐】超50万VC++源码: 大型工控、组态仿真、建模CAD源码2018！
【推荐】加入腾讯云自媒体扶持计划，免费领取域名&服务器
最新IT新闻:
· 京东宣布成立三大事业群 打造积木型组织拥抱无界零售变革
· 苏宁宣布重磅福利：“7天无理由退货”线上线下统一标准
· 兴趣降温 安卓厂商无意模仿iPhone X推出3D识别
· 乐视云更名新乐视云联：仍未获云服务牌照
· 微软搜索引擎Bing改进航班 电影和比赛结果查询
» 更多新闻... 最新知识库文章:
· 步入云计算
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
· 大道至简，职场上做人做事做管理
» 更多知识库文章... 历史上的今天:
2015-03-03 CSS魔法堂：再次认识font

公告

肥仔John@github
作品：
本文转自Justin博客园博客，原文链接： .html，如需转载请自行联系原作者