前端开发“居中”问题总结，希望对大家有帮助

在项目开发中，我们都会遇到居中问题，有时候，觉得明明可以居中，但显示出来就是不居中，然后就特别郁闷。那么怎样实现各种需求的居中呢？请仔细看完下文，所有的居中问题都不再是问题了！文章稍微有点长，有点耐心哟。

一、水平居中

方法：行内元素 （父元素）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的兼容性

希望这些对你有所帮助