CSS中在不同场景下，解决居中的方式有很多，经常让人无从下手，所有我们将CSS居中进行一次小结，方便以后我们布局使用。
水平居中
1、 inline或者是inline-*元素
对于这类元素只需要在其块级父元素中规定text-align:center
.parent{text-align:center;}
2、一个块级元素
假如一个块级元素被指定width后，我们可以通过指定margin-left以及margin-right来使其居中（假如未指定width，将占满整行就没有必要居中）
.parent{margin-left:auto;margin-right:auto;}
3.多个块级元素
如果你想让两个或者两个以上的块级元素在一行上面水平居中，那么最好的办法是改变他们display的类型。这儿给两个例子，一个使用inline-block，另一个使用flex。当然，如果你的意思是让多个块级元素堆积叠加显示在一条竖列上，那么设置左右外边距的值为auto这一方法依然有效。
垂直居中
1、单行inline或者inline-*元素
对于该类元素我们可以通过设置padding-top以及padding- bottom来达到垂直居中的效果
.parent{padding-top:50px;padding- bottom:50px;}
但是当padding不可使用时，可以尝试将height以及line-height设为相同的大小的值
.parent{height:50px;line-height:50px;}
2、多行inline或者inline-*元素
使用flex将子元素相对于父元素居中
.parent{display: flex;flex-direction: column;justify-content: center;}
3、块级元素
在网页布局中，不知道元素的具体高度（即高度非固定值）是很常见的，通过下移其父级高度的一半，再向上移动其自身高度的一半达到垂直居中的效果。
.parent{position: relative;}
.child{position: absolute;top:50%;transform:translateY(-50%);}
当然我们也可以使用flex来使其垂直居中，而且使用flex会特别简单
.parent{display: flex;flex-direction: column;justify-content: center;}
水平垂直居中
1、使用flex
很显然通过上面的总结我们知道使用flex可以很简单的让元素到达水平垂直居中
.parent{display: flex;justify-content: center;align-items: center;}
2、使用position
使用绝对定位先设置相对于父元素50%和50%的上/左偏移，再使用transform属性，即translate(-50%, -50%)，在横向、纵向上都偏移自身高度的一半以居中。
.parent{position: relative;}
.child{position: absolute;top:50%left:50%;transform:translate(-50%, -50%);}
本文仅是对常用居中方法进行总结，还有很方法并未收录进来，因为我也不是很清楚.....所以将原文地址链接放这里，大家一起学习一起进步吧。
网友评论