鲁达 因思维新建站官网：jz.in
文|鲁掌柜
官网：in
文：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元素时才能居中哦