一，水平居中

方法① ：行内元素（父元素）text-align，（子元素）inline-block

.parent{text-align: center;}
.child{display: inline-block;}

总结：

优点：兼容性好，支持低版本浏览器

缺点：需要同时在父元素和子元素上设置

适用场景：子元素数量少（或只有一个），并且需要兼容低版本浏览器时使用，不受float影响

方法②：块状元素使用margin:0 auto来实现

.child{width:200px;margin:0 auto;}

优点：兼容性好

缺点：需要指定宽度

前提：用于子元素上，不受float影响

方法③：（子元素）display:table;margin:0 auto;

.child{display:table;margin:0 auto;}

优点：只需要对自身进行设置

缺点：不兼容IE6和IE7

适用场景：子元素数量多，不方便修改父元素的属性，对浏览器版本要求相对较低时使用

方法④：决定定位实现（父元素）position:relative，（子元素）absolute+left+transform（translateX(-50%)）

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现，不过这样就必须知道盒子的宽度，但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}

优点：不影响其他元素

缺点，transform兼容性，IE9及以上可用

方法⑤：flex+justify-content/margin

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}

第一种方法：

优点：只设parent

缺点：flex兼容性差，而且比较耗资源

第二种方法：

优点：代码简单

缺点：污染父元素，flex兼容性问题，如果进行大面积的布局可能会影响效率

二，垂直居中

方法① ：单行文本设置line-height等于父元素高度

.child{ height:20px; line-height:20px}

优点：代码简单

缺点：只适合一行文本，多行文本则不可以

这是一种很流行的方法, 也适应IE7.

方法② ：行内块级元素使用display:inline-block; vertical-align:middle;

.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle}

方法③ ：块级元素使用vertical-align的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}

优点：兼容性比较好，换成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{display:table}
.child{display:table-cell;vertical-align:middle;}

优点：元素高度可以动态改变，不需要css定义，如果父元素有足够空间，该元素不会被截断

缺点：IE6、7，甚至IE8 beta中无效

方法④：使用绝对定位

.parent{position:relative;}

.child{positon:absolute;top:50%;transform:translate(0,-50%);}

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

方法⑤：使用flex实现方法（父）flex + align-items

.parent{display:flex;align-items:center;}

优点：只要设置parent

缺点：flex和align-items的兼容性

三、【终极需求】水平垂直同时居中！

方法①：元素高度固定

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}

适用于所有浏览器

方法②：元素高度固定

.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:0;left:0;right:0;bottom:0;margin:auto;}

适用于所有浏览器

方法③：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

方法④：使用绝对定位

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}

优点：基本只设置子元素，不影响其他元素

缺点：transform兼容性问题

方法⑤：利用flex实现

.parent{display:flex;justify-content:center;align-items:center;}

优点：只要设置parent

缺点：flex和align-items的兼容性

web前端开发中的各种居中相关推荐

表单html遇到的问题及处理,Web前端开发中常见问题及解决方案
Web前端开发中常见问题及解决方案时间:2017-04-24 来源:web前端开发小赢家作为一名web前端开发工程师,我们在工作时免不了会遇到各种各样的问题.因为web前端开发相对于Jav ...
web前端开发中需要掌握的技术：
web前端开发中需要掌握的技术: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于 ...
Web前端开发中的表单练习
在web前端开发中,练习table的使用是非常重要的,通过表单的练习可以很好的帮助我们掌握表单的使用方式. 效果如图所示: 代码如下: css采用了外部样式 HTML部分: <!DOCTYPE ...
将chart放入panel中出现滚动条_聊天场景在web前端开发中的体验与优化
在日常工作中,如下图的聊天场景是不是很熟悉,没错就是我们再熟悉不过的 QQ 和微信,一个正常的聊天界面大致上是长这个样子的: 这种聊天窗口的消息流有两个明显的特点: 最新的消息和滚动条初始位置需要在列 ...
列举在Web前端开发中经常会设置的特殊样式！
在实际开发中,移动Web页面的设计风格更接近App(手机应用),而不是传统的网页.为了有更好的用户体验,我们可以给移动Web页面设置一些特殊样式.下面为列举在移动Web开发中经常会设置的特殊样式,具体 ...
Web前端开发中最基本的找错误的方法，你得了解一下
本文将与您分享在制作网页首页时,寻找错误.错误及解决方案,非常详细,在此向您推荐,希望对您有所帮助. WEB开发主要是两个交互(B/S数据) 浏览器: 1包含html.css.js等客户端代码运行错误 ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
小猿圈Web前端开发学习路线
很多人已经下定决心学习前端开发,但是学习很盲目,没有一个明确的目标,导致学了很长时间效果也没有很明显,最终放弃了,这个结果是我们最不想看到的结果,那么学习路线就十分重要了,好的学习路线对学习会引向成功 ...
Web前端开发学习误区，你掉进去了没？
从接触网站开发以来到现在,已经有五个年头了吧,今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时,勾起了在这网站开发道路上的一串串回忆,成功与喜悦.烦恼与纠结都历历在目,感慨颇多. 先 ...

web前端开发中的各种居中

二，垂直居中

.parent{position:relative;}

三、【终极需求】水平垂直同时居中！

方法①：元素高度固定

适用于所有浏览器

方法②：元素高度固定

适用于所有浏览器

方法③：（父）text-align + table-cell + vertical-align，（子）inline-block（兼容性方案）

web前端开发中的各种居中相关推荐

最新文章

热门文章