CSS 6种完全居中最佳实践(整理)
2017-06-20 20:04
239 查看
2016年4月28日
在线演示
在普通文档流里,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上不起作用
在线演示
在线演示
CSS:
在线演示
在线演示
优点:
内容可以是任意高宽,溢出也能表现良好
可以用于各种高级布局技巧
同时注意: 不支持IE8-9
同时注意:
需要在body上写样式,或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题
CSS:
在线演示
参考出处:
CodePen of shshaw
伯乐在线
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 a3b5 ; 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
伯乐在线
相关文章推荐
- Web 前端优化最佳实践之 CSS 篇
- CSS-Styled列表:例子,指南和最佳实践
- CSS图片垂直居中方法整理集合 !(常见问题解答)
- Microsoft SQL Server 索引碎片整理最佳实践
- css 背景半透明最佳实践
- 快速开发的最佳实践整理
- css 应用最佳实践-组织规则
- CSS书写标准及最佳实践
- css垂直水平居中的整理
- Web 前端优化最佳实践之CSS 篇
- CSS布局大全:40多个教程,提示,例子和最佳实践
- 整理网上的一些关于sharepoint编码方面的最佳实践
- 预防企业数据丢失的6种最佳实践
- CSS图片垂直居中方法整理集合 !
- 整理网上的一些关于sharepoint编码方面的最佳实践
- Web 前端优化最佳实践之 CSS 篇
- 学习开始:HTML之路 XHTML &amp; CSS 最佳实践指南
- Microsoft SQL Server 2000 索引碎片整理最佳实践(下)
- CSS最佳实践:为今后的项目制作空白CSS模板文件 留以后查阅
- CSS 布局:40个教程、技巧、例子和最佳实践