CSS中在不同场景下，解决居中的方式有很多，经常让人无从下手，所有我们将CSS居中进行一次小结，方便以后我们布局使用。

水平居中

对于这类元素只需要在其块级父元素中规定text-align:center

.parent{text-align:center;}

假如一个块级元素被指定width后，我们可以通过指定margin-left以及margin-right来使其居中（假如未指定width，将占满整行就没有必要居中）

.parent{margin-left:auto;margin-right:auto;}

如果你想让两个或者两个以上的块级元素在一行上面水平居中，那么最好的办法是改变他们display的类型。这儿给两个例子，一个使用inline-block，另一个使用flex。当然，如果你的意思是让多个块级元素堆积叠加显示在一条竖列上，那么设置左右外边距的值为auto这一方法依然有效。

垂直居中

对于该类元素我们可以通过设置padding-top以及padding- bottom来达到垂直居中的效果

.parent{padding-top:50px;padding- bottom:50px;}

但是当padding不可使用时，可以尝试将height以及line-height设为相同的大小的值

.parent{height:50px;line-height:50px;}

使用flex将子元素相对于父元素居中

.parent{display: flex;flex-direction: column;justify-content: center;}

在网页布局中，不知道元素的具体高度（即高度非固定值）是很常见的，通过下移其父级高度的一半，再向上移动其自身高度的一半达到垂直居中的效果。

.parent{position: relative;}

.child{position: absolute;top:50%;transform:translateY(-50%);}

当然我们也可以使用flex来使其垂直居中，而且使用flex会特别简单

.parent{display: flex;flex-direction: column;justify-content: center;}

很显然通过上面的总结我们知道使用flex可以很简单的让元素到达水平垂直居中

.parent{display: flex;justify-content: center;align-items: center;}

使用绝对定位先设置相对于父元素50%和50%的上/左偏移，再使用transform属性，即translate(-50%, -50%)，在横向、纵向上都偏移自身高度的一半以居中。

.parent{position: relative;}

.child{position: absolute;top:50%left:50%;transform:translate(-50%, -50%);}

本文仅是对常用居中方法进行总结，还有很方法并未收录进来，因为我也不是很清楚.....所以将原文地址链接放这里，大家一起学习一起进步吧。