前端中常用的那些上下左右居中的方法

因思维新建站官网：jz.inspinovation.com

文|鲁掌柜

官网：inspinovation.cn

文：Melon

说起居中对齐，这可能是众多前端开发者都会的，但是实现的方式我相信一定是千变万化的，我就来理一理我常用的对齐方法，既有左右居中这种比较简单的，也有上下居中这种蛋疼的。

先来说说左右居中

方法一：text-align:center;

最为简单的方法，不多说，针对行内元素的父元素，添加该属性即可居中。也可以在p元素中直接使用，使内容居中对齐。

方法二：marign:0 auto；

该样式应用在固定宽度的块级元素上，比如div，如果是行内元素，也可以用该方法，前提是使用display:block；

方法三：padding

可能有人会说，padding怎么用来居中呢，我使用padding居中的情形是，在动态数据生成的标签或按钮中，又包含背景的时候来使用，这样看起来也是居中的，而且是不论文本长短的居中。比如我们因思维新商城中商品详情中的一个例子。每个a标签统一的padding值，样式一致。该方法同样可以竖直居中

方法四：绝对定位居中

在一些特殊的情况下需要用到绝对定位，这时又要居中的话，可以分为两种情况。第一：固定宽度的情况。附一个demo，通过left：50%；再使用负的margin来抵消多余的left，即居中了。该方法同样可以用于竖直居中，是一个非常实用的方法。

绝对定位不定宽度的居中，这时就需要在想要居中的元素上加一个父级标签，并text-align:center；如div。然后让子元素display:inline-block；即可居中。

左右居中我平常用的主要就是以上四种方法，当然肯定还有很多其它的方式，我也不在这里过多的讨论了，每个人都有每个人的方式。下面稍微提一下上下居中。

上下居中，第一次碰到这个问题，真的是让我非常蛋疼，网上查了很多方法，后来与朋友讨论的时候发现使用display:table；可以达到上下的居中，但是据说这样会破坏文档流结构，不是特别推荐大家使用，还是附一个demo。

通过将div定位为table属性，并增加vertical-align属性，即可达到居中的属性。只是这种用法稍微复杂，但是在一些特定时刻还是可以用的。最简单的方式还是使用原生table的方法，上下居中最为方便。但是要注意内部只有为inline-table或者inline元素时才能居中哦