水平居中布局说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。
首先我们来看看水平居中
1.margin + 定宽
Demo
.child {
width: 100px;
margin: 0 auto;
}
相必是个前端都见过，这定宽的水平居中，我们还可以用下面这种来实现不定宽的
2. table + margin
Demo
.child {
display: table;
margin: 0 auto;
}
display: table 在表现上类似 block 元素，但是宽度为内容宽。
- 无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为
3.inline-block + text-align
Demo.child { display: inline-block; } .parent { text-align: center; } - 兼容性佳（甚至可以兼容 IE 6 和 IE 7）
Demo.parent { position: relative; } .child { position: absolute; left: 50%; width: 100px; margin-left: -50px; } -
宽度固定
- 相比于使用transform ，有兼容性更好
Demo.parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } -
绝对定位脱离文档流，不会对后续元素的布局造成影响。
- transform 为 CSS3 属性，有兼容性问题
Demo.parent { display: flex; justify-content: center; } -
只需设置父节点属性，无需设置子元素
- flex有兼容性问题
Demo.parent { display: table-cell; vertical-align: middle; } - 兼容性好(IE 8以下版本需要调整页面结构至 table)
强大的absolute对于这种小问题当然也是很简单的
Demo.parent { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); } -
绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
- transform 为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中
3.flex + align-items如果说absolute强大，那flex只是笑笑，因为，他才是最强的。。。但它有兼容问题
水平垂直居中 1. absolute + transformDemo.parent { display: flex; align-items: center; } Demo.parent { position: relative; } .child { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } - 绝对定位脱离文档流，不会对后续元素的布局造成影响。
- transform 为 CSS3 属性，有兼容性问题
Demo.parent { text-align: center; display: table-cell; vertical-align: middle; } .child { display: inline-block; } - 兼容性好
Demo.parent { display: flex; justify-content: center; align-items: center; } -
只需设置父节点属性，无需设置子元素
- 蛋疼的兼容性问题
left
right
right
.left { float: left; width: 100px; } .right { margin-left: 100px } IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：
left
right
right
.left { float: left; width: 100px; } .right-fix { float: right; width: 100%; margin-left: -100px; } .right { margin-left: 100px } 此方法不会存在 IE 6 中3像素的 BUG，但 .left 不可选择， 需要设置 .left {position: relative} 来提高层级。 注意此方法增加了不必要的 HTML 文本结构。
傲娇的程序员应该放弃太低版本的浏览器
2.float + overflowleft
right
right
.left { float: left; width: 100px; } .right { overflow: hidden; } 设置 overflow: hidden 会触发 BFC 模式（Block Formatting Context）块级格式上下文。BFC是什么呢。用通俗的来讲就是，随便你在BFC 里面干啥，外面都不会受到影响 。此方法样式简单但不支持 IE 6
3 .tableleft
right
right
.parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell; } table 的显示特性为每列的单元格宽度和一定等与表格宽度。 table-layout: fixed 可加速渲染，也是设定布局优先。table-cell 中不可以设置 margin 但是可以通过 padding 来设置间距
4. flexleft
right
right
.parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; } - 低版本浏览器兼容问题
- 性能问题，只适合小范围布局
我们在学会一列定宽，一列自适应的布局后也可以方便的实现 多列定宽，一列自适应 多列不定宽加一列自适应 这里我们不一一讲解，大家自行尝试，也可以巩固前面学习的
等分布局 1. float1
2
3
4
.parent { margin-left: -20px; } .column { float: left; width: 25%; padding-left: 20px; box-sizing: border-box; } - 此方法可以完美兼容 IE8 以上版本
1
2
3
4
.parent { display: flex; } .column { flex: 1; } .column+.column { margin-left: 20px; } - 强大简单，有兼容问题
等高布局 1.table1
2
3
4
.parent-fix { margin-left: -20px; } .parent { display: table; width: 100%; table-layout: fixed; } .column { display: table-cell; padding-left: 20px; } table 的特性为每列等宽，每行等高可以用于解决此需求
2.flexleft
right
right
.parent { display: table; width: 100%; table-layout: fixed; } .left { display: table-cell; width: 100px; } .right { display: table-cell } left
right
right
.parent { display: flex; } .left { width: 100px; margin-left: 20px; } .right { flex: 1; } 注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
3. floatleft
right
right
.parent { overflow: hidden; } .left, .right { padding-bottom: 9999px; margin-bottom: -9999px; } .left { float: left; width: 100px; margin-right: 20px; } .right { overflow: hidden; } 此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差 傲娇的程序员应该放弃太低版本的浏览器
原文链接：www.xingxin.meCSS教程相关栏目本月热门文章
- 1【Linux驱动开发】设备树详解（二）设备树语法详解
- 2别跟客户扯细节
- 3Springboot+RabbitMQ+ACK机制(生产方确认(全局、局部)、消费方确认)、知识盲区
- 4【Java】对象处理流（ObjectOutputStream和ObjectInputStream）
- 5【分页】常见两种SpringBoot项目中分页技巧
- 6一文带你搞懂OAuth2.0
- 7我要写整个中文互联网界最牛逼的JVM系列教程 | 「JVM与Java体系架构」章节：虚拟机与Java虚拟机介绍
- 8【Spring Cloud】新闻头条微服务项目：FreeMarker模板引擎实现文章静态页面生成
- 9JavaSE - 封装、static成员和内部类
- 10树莓派mjpg-streamer实现监控及拍照功能调试
- 11用c++写一个蓝屏代码
- 12从JDK8源码中看ArrayList和LinkedList的区别
- 13idea 1、报错java: 找不到符号 符号: 变量 log 2、转换成Maven项目
- 14在openwrt使用C语言增加ubus接口（包含C uci操作）
- 15Spring 解决循环依赖
- 16SpringMVC——基于MVC架构的Spring框架
- 17Andy‘s First Dictionary C++ STL set应用
- 18动态内存管理
- 19我的创作纪念日
- 20Docker自定义镜像-Dockerfile
热门相关搜索路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名 中央民族大学排名 北京舞蹈学院排名 北京电影学院排名 中国戏曲学院排名 河北政法职业学院排名 河北经贸大学排名 天津中德应用技术大学排名 天津医学高等专科学校排名 天津美术学院排名 天津音乐学院排名 天津工业大学排名 北京工业大学耿丹学院排名 北京警察学院排名 天津科技大学排名 北京邮电大学(宏福校区)排名 北京网络职业学院排名 北京大学医学部排名 河北科技大学排名 河北地质大学排名 河北体育学院排名名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号
