水平居中布局的总结
-
布局不是某个技术内容，而是一种设计思想。
关于居中布局
分成三种：水平居中、垂直居中、水平垂直居中
水平居中布局
水平居中布局就是指当前元素在父级元素容器中，水平方向是居中显示的。
下面介绍了三种常用的水平居中布局方式，其他不常用的可以自行探索
inline-block + text-align 属性配合使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中第一种方法</title> <style> * { padding: 0; margin: 0; } .parent { width: 100%; height: 300px; background: #999; text-align: center; } .child { width: 200px; height: 200px; background: red; display: inline-block; } </style> </head> <body> <!-- 父级容器 --> <div class="parent"> <!-- 子级元素 --> <div class="child"> </div> </div> </body> </html>- 思考1 - 为什么text-align会对子级元素生效
因为子级元素display属性为inline-block(行内块级元素)，有内联元素的特性，所以会生效
- 思考2 - 为什么不直接用display:inline(内联元素)？
当设置属性为inline时，其width和height属性将无效，需要为child内添加内容才可以显示。是否使用inline需要根据自身场景灵活变动。
优点与缺点
优点：
- 游览器兼容性比较好
缺点：
-
text-align 属性具有继承性，导致子级元素的文本内容也是居中显示的
-
解决：为child属性重新设置，如text-align:left
table + margin 配合使用
沿用上面的代码，只改变css
* { padding: 0; margin: 0; } .parent { width: 100%; height: 300px; background: #999; } .child { width: 200px; height: 200px; background: red; display: table; margin: 0 auto; }- 思考1 - display一定要为table吗
这里设置为table是优先排除了默认的block属性，当设置margin:0 auto,display为table或block才会生效。
优点与缺点
优点：
- 只需要对子级元素设置即可。
缺点：
- 如果子级元素脱离文档流，导致margin属性的值无效，无法居中。
脱离文档流的情况：
- 设置了float浮动
- 设置为绝对定位absolute
- 设置为固定定位fixed
absolute + transform 属性配合使用
沿用上面的代码，只改变css
* { padding: 0; margin: 0; } .parent { width: 100%; height: 300px; background: #999; position: relative; } .child { width: 200px; height: 200px; background: red; position: absolute; left: 50%; transform: translateX(-50%); }- 思考1 - 绝对定位的情况
-
如果父级元素没有开启定位的话，当前元素是相对于页面定位的；
-
如果父级元素开启了定位的话，当前元素是相对于父级元素定位的；
- 思考2 -transform为什么不用子级元素的一半100px？
考虑到子级元素可能不是固定的宽度。用-50%可以自行调节。
- 思考3 - position可以有哪些值
position设置可以是fixed、absolute、relative
优点与缺点
优点：
- 父级元素无论是否脱离文档流，不影响子集元素水平居中效果
缺点：
- transform属性是css3中新增属性，游览器支持情况不好。
更多推荐主题
-
水平垂直居中布局的总结
综合讨论 • • icewing