在项目开发中,我们都会遇到居中问题,有时候,觉得明明可以居中,但显示出来就是不居中,然后就特别郁闷。那么怎样实现各种需求的居中呢?请仔细看完下文,所有的居中问题都不再是问题了!文章稍微有点长,有点耐心哟。
一、水平居中
方法:行内元素 (父元素)text-align,(子元素)inline-block
.parent
.child
总结:
优点:兼容性好,支持低版本浏览器
缺点:需要同时在父元素和子元素上设置
适用场景:子元素数量少(或只有一个),并且需要兼容低版本浏览器时使用,不受float影响
方法:块状元素 使用margin:0 auto来实现
.child
总结:
优点:兼容性好
缺点:需要指定宽度
前提:用于子元素上,不受float影响
方法:(子元素)display:table;margin:0 auto;
.child
总结:
优点:只需要对自身进行设置
缺点:不兼容IE6和IE7
适用场景:子元素数量多,不方便修改父元素的属性,对浏览器版本要求相对较低时使用
方法:绝对定位实现 (父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))
.parent /*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child
总结:
优点:不影响其他元素
缺点:transform兼容性,IE9及以上可用
方法:flex+justify-content/margin
/*第一种方法*/
.parent
/*第二种方法*/
.parent.child
总结:
第一种方法:
优点:只设parent
缺点:flex兼容性差,而且比较耗资源
第二种方法:
优点:代码简单
缺点:污染父元素,flex兼容性问题,如果进行大面积的布局可能会影响效率
二、垂直居中
方法:单行文本 设置line-height等于父元素高度
.child{ height:20px; line-height:20px}
总结:
优点:代码简单
缺点:只适合一行文本,多行文本则不可以
这是一种很流行的方法, 也适应IE7.
方法 :行内块级元素 使用display:inline-block; vertical-align:middle;
.child
.parent:after
方法:块级元素 使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;
/*第一种方法*/
.parent
/*第二种方法*/
.parent
总结:
优点:兼容性比较好,换成table可以兼容IE6,7
缺点:table-cell不能和float、position:absolute同时设置。(只能在外parent外套一层div.wrap才能设置float)
若元素的高度不一定的话
vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素display:table-cell;vertical-align:middle;
/*第一种方法*/
.parent
.child
总结:
优点:元素高度可以动态改变,不需要css定义,如果父元素有足够空间,该元素不会被截断
缺点:IE6、7,甚至IE8 beta中无效
方法:使用绝对定位
.parent
.child
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题
方法:使用flex实现方法 (父)flex + align-items
.parent
优点:只要设置parent
缺点:flex和align-items的兼容性
三、【终极需求】水平垂直同时居中!
方法:元素高度固定
.parent
.child
适用于所有浏览器
方法:元素高度固定
.parent
.child
适用于所有浏览器
方法:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)
.parent
.child
方法:使用绝对定位
.parent
.child
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题
方法:利用flex实现
.parent
优点:只要设置parent
缺点:flex和align-items的兼容性
希望这些对你有所帮助
领取专属 10元无门槛券
私享最新 技术干货