前言在我看来，CSS入门路上最烦的莫过于CSS的各种居中。刚学CSS的时候，居中的问题经常困扰我。那么为什么CSS居中这么烦人呢？在我看来，这是因为CSS的居中方式及其适用范围，导致在应用时很难区分哪个有效。下面我简单梳理一下CSS的居中方法。水平居中1.内联元素的水平居中对于内联元素（例如text、link或inline-*元素）的水平居中：.inline{text-align:center;}该方法针对inline-block,inline-table,等等都有效。2、块级元素水平居中块级元素（如div、p等）水平居中：.block{margin:0auto;}这个方法是设置margin-left和margin-right为汽车。但是这个方法的前提是你得设置块级元素的宽度，否则它的宽度会填满它的父元素。3.多个块级元素的水平居中当多个块级元素需要在一行中居中时，我们可以将它们设置为inline-block或flex。1)inline-block.inline-block-center{display:inline-block;text-align:right;}2)flexbox.flex-center{display:flex;justify-content:center;}verticalcenterverticalcenter比horizo??ntalcentering更复杂。接下来我会按照思路逐步梳理一下垂直居中的方法（包括不可行的方法）：1）既然块级元素的水平居中可以使用margin:0auto，那么垂直居中可以使用margin吗？:auto0呢？不能。因为如果margin-top设置为auto，默认值为0。2）OK，那我手动用calc指定margin-topmargin-top:calc(50%-50px);不。因为margin-top的百分比其实是根据父元素的宽度来决定的。3)好吧，让我使用relative:position:relative;顶部：计算（50%-50px）；这次它会起作用。但是这种方法的缺点是不能改变元素的高度。4）对于inline-element和table-cell，垂直居中也可以使用vertical-align:display:table-cell;vertical-align:middle;但此时由于table-cell是内联的，所以宽度会变成和子元素一样，当指定宽度强制为100%时，子元素的高度会变成和父元素一样元素。5)使用伪元素：
