CSS居中

水平居中

行内或类行内元素（比如文本和链接）

在块级父容器中让行内元素居中，只需使用text-align: center;

这种方法可以让inline/inline-block/inline-table/inline/flex

块级元素

让块级元素居中的方法就是设置margin-left和margin-right为auto

多个块级元素

如果要让多个块级元素在同一水平线上居中，那么可以修改它们的display值。这里有两个示例，其中一个使用了inline-block的显示方式，另一个使用了flexbox的显示方式。

垂直居中

行内或类行内元素（比如文本和链接）
单行
对于单行行内或者文本元素，只需为它们添加等值的padding-top和padding-bottom就可以实现垂直居中。
如果因为某些原因我们不能使用padding
属性来实现垂直居中，而且已知文本不会换行，那么就可以让line-height和center相等，从而实现垂直居中。

多行
对于多行文本，同样可以使用等值padding-to和padding-bottom的方式实现垂直居中。如果你在使用过程中发现这种方法没见效，那么你可以通过 CSS 为文本设置一个类似table-cell的父级容器，然后使用 [vertical-align]:middle。此外，你还可以使用 flexbox 实现垂直居中。

上述方法只适用于父级容器拥有确定高度的元素。
如果上述方法都不起作用，那么你就需要使用被称为幽灵元素（ghost element）的非常规解决方式：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加vertical-align: middle;样式，即可实现垂直居中。

宽高固定元素

设定父级容器为相对定位的容器，设定子元素绝对定位的位置position: absolute; top: 50%; left: 50%
，最后使用负向margin实现水平和垂直居中，margin的值为宽高（具体的宽高需要根据实际情况计算padding）的一半。

宽高不固定元素

如果无法获取确定的宽高，同样需要设定父级容器为相对定位的容器，设定子元素绝对定位的位置position: absolute; top: 50%; left: 50%。不同的是，接下来需要使用transform: translate(-50%, -50%);；

浮动实现水平居中的方法

没有浮动的div：大家都知道div是一个块元素，其默认的宽度就是100%，如图所示：

如果div设置了浮动之后，他的内容有多宽度就会撑开有多大的容器（除显式设置元素宽度值之外），这也是我们实现让分页导航居中的关键所在

接下来使用传统的制作方法，我们会让导航浮动到左边，而且每个分页项也进行浮动，就如下图所示一样：

现在要想的办法是让分页导航居中的效果了，在这里是通过“position:relative”属性实现，首先在列表项“ul”上向右移动50%（left:50%;），看到如下图所示：

如上图所示一样，整个分页向右移动了50%的距离，紧接着我们在“li”上也定义“position:relative”属性，但其移动的方向和列表“ul”移动的方向刚好是反方向，而其移动的值保持一致：