CSS布局：水平居中

最新推荐文章于 2023-02-09 16:14:40 发布
最新推荐文章于 2023-02-09 16:14:40 发布
阅读量344 收藏 1
点赞数
分类专栏： html+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" ο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整体元素的样式变化。

 

总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

爱凤凤
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css布局网页水平居中常用方法
10-30
页面水平居中一般会令人很头疼，尤其新手。浏览器之间的不兼容也会带来很大问题。本篇文章主要介绍了css布局网页水平居中常用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS实现: 水平居中 的几种方法
热门推荐
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
CSS样式：水平居中的方法总结
小乔与你同在
09-01 844
1 样式属性描述 2 水平居中 （1）行内元素水平居中 1.1 首先看其父级是不是块级元素，如果是则直接给父元素设置： text-align:center; div{ width:300px; height:100px; background:pink; text-align:center; } <div> <span>我是行内元素</span> &...
【CSS 布局】水平垂直居中
我有满天星辰的博客
02-09 1685
创建一个父盒子，和子盒子
6种方法实现css布局水平居中
web前端开发博客
07-02 5138
说到常见css布局，面试时经常也会考考大家，看对css知识掌握的咋样，对css盒模型理解没，比如会问css布局水平居中的方法或者css布局垂直居中的方法等，今天分享常见css布局水平居中的6种方法。 方法一：margin + width 1 2 3 4 5 6 7 8 9 10 11 ...
CSS布局：元素水平垂直居中
m0_59011179的博客
02-26 120
CSS布局：元素水平垂直居中
CSS网页布局：div水平居中的各种方法
12-12
这其中最常用到的就是使整个页面水平居中的效果，这是在页面布局中基本，也是最应该首先掌握的知识。不过，还是经常会有人问到这个问题，在这里我简单总结一下使用Div和CSS实现页面水平居中的方法： 一、margin:auto...
HTML+CSS实现单列布局水平居中布局
09-27
主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下
CSS网页布局：div垂直居中的各种方法
12-10
在前面的文章中我简单总结了一个“CSS在页面布局中实现div水平居中的方法”，其实水平居中实现还是比较简单的，反而垂直居中有点麻烦，因为我们设计页面的时候往往水平宽度都是固定的。因此我们有必要总结一下在页面...
后端开发是一个涉及广泛技术和工具的领域.docx
04-30
后端开发是一个涉及广泛技术和工具的领域，这些资源对于构建健壮、可扩展和高效的Web应用程序至关重要。以下是对后端开发资源的简要介绍： 首先，掌握一门或多门编程语言是后端开发的基础。Java、Python和Node.js是其中最受欢迎的几种。Java以其跨平台性和丰富的库而著名，Python则因其简洁的语法和广泛的应用领域而备受欢迎。Node.js则通过其基于JavaScript的单线程异步I/O模型，为Web开发提供了高性能的解决方案。 其次，数据库技术是后端开发中不可或缺的一部分。关系型数据库（如MySQL、PostgreSQL）和非关系型数据库（如MongoDB、Redis）各有其特点和应用场景。关系型数据库适合存储结构化数据，而非关系型数据库则更适合处理大量非结构化数据。 此外，Web开发框架也是后端开发的重要资源。例如，Express是一个基于Node.js的Web应用开发框架，它提供了丰富的API和中间件支持，使得开发人员能够快速地构建Web应用程序。Django则是一个用Python编写的Web应用框架，它采用了MVC的软件设计模式，使得代码结构更加清晰和易于维护。
华为数字化转型实践28个精华问答glkm.pptx
04-30
华为数字化转型实践28个精华问答glkm.pptx
新员工入职培训全流程资料包gl.zip
04-30
新员工入职培训全流程资料包（100+个文件） 1入职流程指引 万科新职员入职通知书 万科新职员入职引导手册 新进员工跟进管理表 新员工入职报到工作单(文职) 新员工入职报到流程 新员工入职流程表 新员工入职手续办理流程(工厂 新员工入职手续清单 新员工入职须知 新员工入职训流程 新员工入职引导表(导师用) 2 入职工具表格 3 培训方案计划 4培训管理流程 5培训教材课件 6 培训效果检测 7 员工管理制度 8 劳动合同协议 9 新员工培训PPT模板(28套)
三菱PLC通讯程序实例
04-30
FX5U PLC作为主、从站的通讯方式程序实例，以及包含详细说明文件...
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
最新发布
04-30
技术需求报告-集行波测距与故障录波功能于一体的电网综合故障分析系统.docx
最新二开版本源码博客论坛源码,UI很漂亮,可切换皮肤界面.rar
04-30
最新二开版本源码博客论坛源码,UI很漂亮,可切换皮肤界面.rar最新二开版本源码博客论坛源码,UI很漂亮,可切换皮肤界面.rar
2024-2030全球及中国广谱防晒霜行业研究及十五五规划分析报告.docx
04-30
2024-2030全球及中国广谱防晒霜行业研究及十五五规划分析报告
基于Qt Creator实现中国象棋人机对战， c++实现.zip
04-30
基于Qt Creator实现中国象棋人机对战， c++实现.zip
华为用“三阶段十二步”法保证业务战略引领数字化转型glkx.pptx
04-30
华为用“三阶段十二步”法保证业务战略引领数字化转型glkx.pptx
基于matlab实现自适应稳健波束形成对角加载算法，其与输入信噪比的关系.rar
04-30
基于matlab实现自适应稳健波束形成对角加载算法，其与输入信噪比的关系.rar
css实现垂直水平居中
04-29
要实现CSS中的垂直水平居中，可以使用以下几种方法： 1. 使用Flexbox布局： 可以通过设置父容器的display属性为flex，并使用justify-content和align-items属性来实现垂直水平居中。具体代码如下： ```css ....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值