点击查看居中演示示例居中演示。
CSS中有一个很重要的概念-布局,而最常见的布局之一则是居中布局。那么,我们如何实现自适应宽高元素的居中布局呢?这里要谈到两个概念,内联(inline)元素与块级(block-level)元素。html中一切元素要么是inline元素,要么是block-level元素。针对inline与block-level元素,CSS又有不同的布局方法。
例如对于inline元素,text-align:center;可以实现水平居中。vertical-align:middle;则实现垂直居中。对于block-level元素,我们可以使用margin: 0 auto;实现水平居中。当然实现居中还有其他方法,比如设置position:absolute;
我们的问题是实现自适应宽高元素水平垂直居中?我们可以将问题分解为三步:1、设置元素自适应宽高 2、实现水平居中 3、实现垂直居中。
如何设置元素自适应宽高?一般元素高度都是自适应的,那么,有哪些设置能够使得元素自适应宽度,并且与居中布局相关?display: inline-block; position: absoute; display: flex; display: table; display: table-cell;.....上述这些设置都能使元素既有块级元素的特性,又自适应宽度。
在此基础上,如何实现元素水平居中?可以使用对块级元素居中的方式,也可以赋给元素内联特性,采用内联居中的方式。我们可以有以下搭配组合1、inline-block+text-align; 2、position+transform; 3、flex+justify-content; 4、table+margin;
1、给父元素设置,text-align:center; 设置子元素display为inline-block;
2、设置子元素position为absolute;并设置left: 50%; 使该元素左上角居中,然后使用transform: translateX( -50%)将其相对父元素水平居中。
3、设置父元素display:flex;父元素子元素默认为flex-item,flex-item内容自适应宽高,然后在父元素上设置,justify-content: center;使得子元素居中。
4、设置子元素display:table;父元素宽高自适应并且具有块级元素特性,然后使用margin: 0 auto;使其居中。
实现元素垂直居中的方法与水平居中类似,有如下搭配组合:
1、父元素:display: table-cell; vertical-align: middle;(vertical-align对inline,inline-block,table-cell元素有效)
2、absolute+transform
3、父元素:display: flex; align-items: center;
综合上述,将设置自适应宽高元素居中的方法可以有如下组合:
1、父元素:text-align: center; display: table-cell; vertical-align: middle; 子元素:display: inline-block;
优点:兼容性好
不足:子元素继承居中属性,需额外代码修复
2、父元素: position: relative; 子元素:position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
优点:absolute脱离文档流,不影响其他元素
不足:不兼容ie6/7/8
3、父元素:display: flex; justify-content: center; align-items: center;
优点:只需设置父元素
不足:不兼容ie6/7/8
以上居中方法并将ie6/7/8的兼容性放在考虑之列。
参考:网易前端微专业网页架构课程。
原文:http://www.huangruixuan.com/2016/03/29/%E5%B1%85%E4%B8%AD%E5%B8%83%E5%B1%80/