水平居中和垂直居中可以说是在开发中经常遇到的问题，网上搜索水平居中和垂直居中的方法有很多，有的方法并不是很好，所以总结下几个常用的水平居中和垂直居中方法。

水平居中

行内元素或类行内元素水平居中

块级父元素当中让行内子元素居中，只需要text-align:center即可，对一些类行内元素，如：inline、inline-block等同样使用。

一种常用的处理分页标签居中的方式就是给子元素设置display:inline-block它的父元素设置成text-align:center

块元素水平居中

块元素水平居中常用的方法就是设置固定宽度，margin值设成auto即可

此方法的缺点就是宽度是固定的，不能自由伸缩

浮动元素水平居中

浮动元素宽度自适应的水平居中，此方法来自Matthew James Taylor写的《Horizontally Centered Menus with no CSS hacks》一文，并且引用其文中演示的示意图。以分页为例，按照传统方法，li标签左浮动且ul左浮动后就会如下图所示

首先为centeredmenu这个div里设置上position:relative,然后再让ul向右移动50%，即left:50%，这样就能看到以下效果,整个分页向右移动了50%

紧接着为li标签定义上position:relative属性，让其移动方向相反，向左移动50%，即right:50%，这样就能看到如下效果,分页就水平居中了。

这个方法兼容性强，而且没有固定宽度的设置，拓展性也强实例代码如下：

垂直居中

行内元素的垂直居中

这个方法很常见，对于一个单行文本的垂直居中，只要将line-height设置为元素高度即可，使用时注意浏览器hack，这个方法的局限就是只能是单行文本的

对于多行文本就要借助display:table了，因为用table做表格时，他的每一行都是垂直居中的，所以就借助这个来实现。示例代码如下

块级元素垂直居中

子元素知道具体宽高的

这个方法就是设置top:50%后，这个块元素的最上边为垂直居中的位置，但是这样整体的内容并不是垂直居中，所以要设置margin-top: -50px; //为高度的一半，这样这个块元素又相对于自身最上面向上又移动了自身的50%，因此就垂直居中了。

第二个方法

子元素不知道具体宽高的

这种情况有三种方法

第一种借助table布局，与上面介绍的多行垂直居中方法一样。

第二种是借助translate的transform属性,示例如下:

    这个方法与上面那个固定宽度垂直居中的思想可是一样的啊，有没有看出来？

第三种就是用flex布局，非常的简单,代码如下:

至于选择哪种方法好看情况吧，因为没有一种方法是万能，总有着各自的不足，也有着各自的优势。