摘要:常见布局方法总结水平居中布局使用场景页面整体水平居中,有具体宽度要求。
常见布局方法总结 水平居中布局
(1) width: (xxx)px; margin: 0 auto;
使用场景:页面整体水平居中,有具体宽度要求。
.content { width:1000px; height:100px; background:red; margin:0 auto; }
(2) text-align: center; display: inline-block;
使用场景:子元素有多个且需要水平居中排列
.wrap { text-align: center; } .content { display: inline-block; width: 100px; height: 100px; background: red; }
(3) absolute+left:50%+margin-left:-width/2
使用场景:子元素宽度确定,子元素之间互不影响
快过年了快过年了快过年了快过年了快过年了快过年了快过年了
.wrap { position: relative; } .content { position: absolute; left: 50%; width: 200px; height: 100px; margin-left: -100px; background: red; }
(4) absolute+left:50%+translateX(-50%)
使用场景:子元素宽度不确定,支持css3的translate属性,子元素之间互不影响
快过年了快过年了快过年了快过年了快过年了快过年了快过年了
.wrap { position: relative; } .content { position: absolute; left: 50%; height: 100px; background: red; transform: translateX(-50%); }
(5) flex布局
使用场景: 支持flex布局方式的浏览器都可以使用此布局,结合了(2)(4)两种方法的优点,无需考虑子元素宽度,且支持多个子元素居中
快过年了快过年了快过年了快过年了快过年了快过年了快过年了
.wrap { display: flex; justify-content: center; } .content { height: 100px; background: red; }垂直居中布局
相比水平居中布局,垂直居中稍微坑了一点,实现方法并没有灵活。
(1)table-cell布局
使用场景:多行文字上下居中
快过年了快过年了快过年了快过年了快过年了快过年了快过年了
.wrap { display: table-cell; vertical-align: middle; height: 200px; } .content { width: 100px; background: red; }
(2)absolute+top:50%+margin-top:-height/2
使用场景:与水平居中一样,适用于子元素高度确定,不会对其他子元素造成影响的情况下的上下居中,由于是绝对定位,父元素需要占据空间,若没有其他子元素,需设置一个高度
.wrap { position: relative; height: 200px; } .content { position: absolute; top: 50%; width: 300px; height: 100px; margin-top: -50px; background: red; }
(3) absolute+top:50%+translateY(-50%)
使用场景:与水平居中一样,适用于子元素高度不确定,不会对其他子元素造成影响的情况下的上下居中,由于是绝对定位,父元素需要占据空间,若没有其他子元素,需设置一个高度
.wrap { position: relative; height: 200px; } .content { position: absolute; top:50%; background: red; transform: translateY(-50%); }
(4) flex布局
使用场景: 支持flex布局方式的浏览器都可以使用此布局,无需考虑子元素高度,书写简便快捷
快过年了快过年了快过年了快过年了快过年了快过年了快过年了
.wrap { display: flex; align-items: center; height: 200px; } .content { background: red; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115497.html
摘要:常见布局方法总结水平居中布局使用场景页面整体水平居中,有具体宽度要求。 常见布局方法总结 水平居中布局 (1) width: (xxx)px; margin: 0 auto; 使用场景:页面整体水平居中,有具体宽度要求。 showImg(https://segmentfault.com/img/bVH7rO?w=1347&h=216); .content { width:...
摘要:高度模型浅识为的简写,简称为块级格式化上下文,为浏览器渲染某一区域的机制,中只有和中还增加了和。并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候,看到 float 属性不...
摘要:清单一些说明注意文档的书写顺序,先写两侧栏,再写主面板,更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局,以及对应的和值。 本文首发于知乎专栏:前端指南 CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单列布局、多列布局的多种实现方式(包括传统的...
阅读 2922·2021-09-22 15:52
阅读 2874·2019-08-30 15:55
阅读 2674·2019-08-30 15:53
阅读 2427·2019-08-30 13:21
阅读 1570·2019-08-30 13:10
阅读 2419·2019-08-26 12:09
阅读 2525·2019-08-26 10:33
阅读 1773·2019-08-23 18:06