CSS 6种完全居中最佳实践(整理)
来源:互联网 发布:js中window和document 编辑:程序博客网 时间:2024/06/05 09:26
2016年4月28日
1.最佳法:
.Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: red; }
在线演示
在普通文档流里,margin: auto; 的意思是设置元素的margin-top和margin-bottom为0。
W3.org:?If ‘margin-top’, or ‘margin-bottom’ are ‘auto’, their used value is 0.设置了position: absolute; 的元素会变成块元素,并脱离普通文档流。而文档的其余部分照常渲染,元素像是不在原来的位置一样。
Developer.mozilla.org:?…an element that is positioned absolutely is taken out of the flow and thus takes up no space设置了top: 0; left: 0; bottom: 0; right: 0; 样式的块元素会让浏览器为它包裹一层新的盒子,因此这个元素会填满它相对父元素的内部空间,这个相对父元素可以是是body标签,或者是一个设置了position: relative; 样式的容器。
Developer.mozilla.org:?For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).给元素设置了宽高以后,浏览器会阻止元素填满所有的空间,根据margin: auto; 的要求,重新计算,并包裹一层新的盒子。
Developer.mozilla.org:?The margin of the [absolutely positioned] element is then positioned inside these offsets.既然块元素是绝对定位的,又脱离了普通文档流,因此浏览器在包裹盒子之前会给margin-top和margin-bottom设置一个相等的值。
W3.org:?If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values.?AKA: center the block vertically
使用“完全居中”,有意遵照了标准margin: auto; 样式渲染的规定,所以应当在与标准兼容的各种浏览器中起作用。
优点:
- 跨浏览器,兼容性好(无需hack,可兼顾IE8~IE10)
- 无特殊标记,样式更精简
- 自适应布局,可以使用百分比和最大最小高宽等样式
- 居中时不考虑元素的padding值(也不需要使用box-sizing样式)
- 布局块可以自由调节大小
- img的图像也可以使用
同时注意:
- 必须声明元素高度
- 推荐设置overflow:auto;样式避免元素溢出,显示不正常的问题
- 这种方法在Windows Phone上不起作用
2.负margin法:
.negative-margin { width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */}
在线演示
3.transform法:
.transform { width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
在线演示
4.inner-block法:
HTML:
<div class="Center-Container is-Inline"> <div class="Center-Block"> <!-- CONTENT --> </div></div>
CSS:
.Center-Container.is-Inline { text-align: center; overflow: auto;} .Center-Container.is-Inline:after,.is-Inline .Center-Block { display: inline-block; vertical-align: middle;} .Center-Container.is-Inline:after { content: ''; height: 100%; margin-left: -0.25em; /* To offset spacing. May vary by font */} .is-Inline .Center-Block { max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */ /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ }
在线演示
5.Flexbox法:
.Center-Container.is-Flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;}
在线演示
优点:
- 内容可以是任意高宽,溢出也能表现良好
- 可以用于各种高级布局技巧
- 同时注意: 不支持IE8-9
同时注意:
- 需要在body上写样式,或者需要额外容器
- 需要各种厂商前缀兼容现代浏览器
- 可能有潜在的性能问题
6.Table-cell法:
HTML:
<div class="Center-Container is-Table"> <div class="Table-Cell"> <div class="Center-Block"> <!-- CONTENT --> </div> </div></div>
CSS:
.Center-Container.is-Table { display: table; }.is-Table .Table-Cell { display: table-cell; vertical-align: middle;}.is-Table .Center-Block { width: 50%; margin: 0 auto;}
在线演示
参考出处:
- CodePen of shshaw
- 伯乐在线
- CSS 6种完全居中最佳实践(整理)
- css 完全居中
- CSS居中完全指南
- CSS中的几种居中方式整理
- css居中思路整理
- css水平居中最佳写法
- CSS最佳实践
- CSS规范 - 最佳实践
- css最佳实践
- CSS规范 - 最佳实践
- CSS最佳实践
- 只用css做到完全居中
- 使用CSS做到完全居中
- css 完全居中 方便查阅
- CSS中的居中:完全指导
- [转载]CSS居中完全指南
- 【CSS】居中的CSS:完全指南
- 可伸缩性最佳实践整理
- 知识锦囊
- Spring Bean的继承
- 《单词的减法》state1~state17(第三遍学习记录)
- Spring定时任务中@PostConstruct被多次执行异常
- <读书笔记>Javascript系列之6种继承(面向对象)
- CSS 6种完全居中最佳实践(整理)
- <读书笔记>JavaScript系列之7种创建对象(面向对象)
- <读书笔记>《Web前端开发最佳实践》
- <读书笔记>《React:引领未来的用户界面开发框架》
- BlackJack(21) on GitHub
- Mapper代理的输入映射和输出映射
- [转]Hadoop之HDFS
- 重温《javascript高级程序设计》(第3版)
- note《JavaScript 秘密花园》