前言一直有个想法总结一下各种居中的方法，但还是没时间整理。最近，我在做一个样式重构项目。顺便总结一下自己用过或者积累的居中方法。行内元素水平居中行内元素水平居中比较简单，直接使用text-align/*行内元素*/.parent4{text-align:center;}块级就可以实现居中效果元素水平居中（块级水平居中方法列举如下）marginauto这是最常用的块级水平居中，使用margin:auto自动达到居中效果，但前提是子元素必须知道width缺点：必须事先知道元素的大小/*子元素必须设置宽度*/.child1{width:100px;高度：100px；保证金：0自动；background:aqua;}使用inline-block实现水平居中缺点：必须有父元素才能设置text-align.parent2{text-align:center;}/*必须通过父元素传递*/.child2{显示：内联块；/*宽度：100px；height:100px;*/background:aqua;}使用css3新的width属性fit-content实现了很多这种情况，我们不知道一个元素的具体尺寸，但是我们需要实现水平居中。这时候我们就想到了float，它会自动扩展宽高，可惜float脱离了文档流，无法使用margin:auto来实现元素的水平居中。inline-block必须有父级才能居中。CSS3新增width属性，实现类似float、inline-block的元素环绕效果，可以使用margin:auto居中。fit-content将根据您的内容包装您的元素。这里就不细说了，有兴趣的朋友可以看看张新旭老师对这些新属性的解释/*width的其他属性*/.parent3{width:fit-content;边距：10px自动；background:aquamarine;}垂直居中内联元素垂直居中line-height实现当前行文本垂直居中/*内联元素，当前行文本垂直居中*/.parent1{height:100px;行高：100px；背景：小麦；}块级元素垂直居中（块级元素居中的方法有很多种，总结如下）负边距实现该方法使用绝对定位，使用负边距值居中，前提是需要知道大小提前。优点：兼容性好缺点：需要提前知道大小.parent2{position:relative;背景：rosybrown；高度：100px；}.child2{背景：蓝色；位置：绝对；宽度：80px；高度：40px；左：50%；顶部：50%；20px;左边距：-40px；}如何在不知道大小的情况下垂直居中，CSS3—translate属性的出现为我们提供了可能。这个方法利用translate实现了基于自身宽高的居中效果，相当于margin的负值，但是我们不需要知道size，translate帮我们解决了。transform中translateoffset的百分比值是相对于自身大小的。优点：不需要提前知道大小缺点：兼容性差（移动端基本支持）/*块级元素：绝对定位+变换优点：不需要提前知道大小缺点：兼容性不好*/.parent3{位置：相对；背景：古董白；height:200px;}.child3{背景：三文鱼;位置：绝对；宽度：80px；高度：40px；左：50%；顶部：50%；transform:translate(-50%,-50%);}块级元素：绝对定位+margin:auto;结合以上两者，我们正在介绍一种非常有用的方法，使用绝对定位。转自张新旭先生博客详情请点击此处。优点：不需要根据宽高做相应的位移，自动居中，兼容性好/*块级元素：绝对定位+边距：auto；优点：不需要根据宽高做相应的位移，兼容性好sex*/.parent4{position:relative;背景：小麦；高度：200px;}.child4{宽度：80px;高度：40px；位置：绝对；左：0；顶部：0；右：0；底部：0；保证金：自动；background:blue;}使用display:table-cell实现显示table和table-cell的垂直居中一般用的不多，所以很少有人关注。这个实现的原理是把它变成表格样式，然后用表格样式居中，在某些情况下很方便。/*块级元素：display:table-cell*/.parent5{width:600px;高度：200px；边框：1px纯红色；显示：表格；}.child5{显示：表格单元格；文本对齐：居中；vertical-align:middle;}/*水平和垂直居中*/.parent7{width:400px;高度：300px；显示：表格单元格；垂直对齐：中间；border:1pxsolidred;}.child7{display:inline-block;垂直对齐：中间；background:blue;}使用calc()计算属性缺点：兼容性差，需要计算，消耗性能，需要提前知道大小。parent8{宽度：300px；高度：300px；边框：1px纯红色；position:relative;}.child8{top:-webkit-calc(50%-50px);顶部：-moz-calc(50%-50px)；顶部：计算（50%-50px）；左：-webkit-calc(50%-50px)；左：-moz-calc(50%-50px)；左：计算（50%-50px）；宽度：100px；高度：100px；背景：蓝色；（这个原理我还没看懂，但是实践过后真的ok了）。parent9{宽度：300px；高度：300px；边框：1px纯红色；文本对齐：居中；}.child9{背景：蓝色；宽度:100px;高度：40px；显示：内联块；vertical-align:middle;}.parent9::before{content:'';高度：100%；显示：内联块；vertical-align:middle;}blockLevelelement:display:flex缺点：pc兼容性差。parent10{宽度：600px；高度：200px；边框：1px纯红色；显示：弹性；对齐项目：居中；/*垂直居中*/justify-content:center;/*水平居中*/}.child10{background:blue;}总结以上是水平居中和垂直居中常用方法的总结。如果想实现水平和垂直居中，可以自己组合搭配方法。有好几种，以后还会有新的方法不断更新。
