原文地址：https://www.xksblog.top/CSS-mainstream-centering-techniques.html几个月的时间学习了很多CSS居中技巧。每次使用它，我发现它总是令人困惑。有时不知道选择哪种技术，有时又经常把方法搞混。我简单整理一下，以后查阅和复习会更方便。这里简要总结了大多数主流的居中方法。如果大家发现更牛皮的方法，会继续更新的。Horizo??ntallycentering内联元素的水平居中text-align:center（在父元素中设置）只对内联元素或内联块元素有效需要放在父元素中块级元素的水平居中margin:0auto;仅对块级元素有效自动引用自适应宽度。本质是将元素周围的剩余空间平均分配，这样元素就会居中。auto只有在设置了块级元素的宽度时才有效（如果不设置宽度，块级元素会默认占据整行，所以是废话）auto无法实现块级元素的垂直居中.我不会在这里深究它。但是margin:auto可以实现绝对定位元素的水平和垂直居中，见下文。参考：为什么margin是auto的时候不能垂直居中？,为什么"margin:auto"可以让块级元素水平居中？,张新旭——margin:auto实现绝对定位元素居中和内联元素垂直居中原理内联元素垂直居中line-height：父元素的高度；(setintheparentelement)只对行内元素或行内块元素有效需要知道父元素的高度需要放在父元素中。适用于只有一个元素需要垂直居中的情况（想同时让多个元素垂直居中时，可以使用padding）vertical-align:middle;（用于垂直对齐行内元素）只对行内元素或行内块元素有效。主要用于文本和与文本相邻的元素在垂直方向上的对齐问题（主要是对齐，不是居中），比如图标和文本对齐。要使用vertical-align，你需要知道文本的baseline和line-box，供参考：[[翻译]ThingsyouneedtoknowaboutVertical-Align](https://segmentfault.com/a/11...，我对cssvertical-align的一些理解和理解（一）使用position:relative使浮动元素水平和垂直居中；具体方法和绝对定位的第一种和第二种方法类似，只是absolute改为relative,并且根据原来的浮动的方向可以稍微修改一下，相对定位relative可以和float叠加，然后相对于float之后的位置定位，缺点是float元素之后还是会占据原来的位置居中。在第二种方法中，如果设置浮动元素的高度会影响transform的具体值。绝对定位元素使用50%推进规则position:absolute;left:50%;top:50%;margin-左边：-元素自身宽度的一半像素；/*水平居中*/margin-top:-元素自身高度的一半像素；/*Verticalcentered*/只对绝对定位元素有效需要知道绝对定位元素的宽高兼容性非常好，首先是主流用法该方法的改进版，使用transform代替marginposition:absolute;左：50%；上：50%；变换：平移（-50%，-50%）；/*水平和垂直居中*/无需知道绝对定位元素的宽高。（如果设置了height，可能会影响transform的具体取值）兼容性一般，IE10+等现代浏览器都支持使用margin:auto;position:absolute;left:0;right:0;/*水平居中*/top:0;bottom:0;/*垂直居中*/margin:auto;只对绝对定位的元素有效。不需要知道宽度和高度，但它需要是一个元素，例如包含自己尺寸的图片。左手和右手必须配对。,top和bottom必须成对出现。目前支持IE9+等浏览器。参考：张新旭——margin:auto实现绝对定位元素居中原理flex居中方法display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/块级元素setdisplay:flex;,setdisplay:inline-flex;对于行内元素。需要注意的几个问题元素浮动后margin属性还是可以设置的，但是auto就不行了。图片居中的问题注意：如果图片的宽度大于父元素的宽度，则不能使用margin:0auto;或文本对齐：居中；使图片居中如果图片的宽度大于父元素的宽度，可以使用绝对定位居中的方式将图片居中。但是，定位流的缺点也很明显。它必须知道图像宽度。如果图片的宽度大于父元素的宽度，也可以使用margin:0-100%;（注意：父元素必须设置text-align:center;）
