共计 3264 个字符，预计需要花费 9 分钟才能阅读完成。
前言
一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。
水平居中
行内元素水平居中
行内元素的居中比较简单，直接使用 text-align 就可以达到居中效果
/* 行内元素 */
.parent4 {
text-align: center;
}
块级元素水平居中 (块级水平居中方法列举以下几种)
margin auto
这是最常用到的块级水平居中，利用 margin:auto 自动达到居中的效果，不过前提是子元素必须知道宽度
缺点：必须提前知道元素的尺寸
/* 必须设置子元素宽度 */
.child1 {
width: 100px;
height: 100px;
margin: 0 auto;
background: aqua;
}
利用 inline-block 实现水平居中
缺点: 必须有个父元素对其设置 text-align
.parent2 {
text-align: center;
}
/* 必须通过父元素 */
.child2 {
display: inline-block;
/*width: 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;
margin: 10px auto;
background: aquamarine;
}
垂直居中
行内元素垂直居中
line-height 实现当行文字垂直居中
/* 行内元素，当行文字垂直居中 */
.parent1 {
height: 100px;
line-height: 100px;
background: wheat;
}
块级元素垂直居中 (块级元素居中的方法比较多，总结如下)
margin 负边距实现
该方法使用绝对定位利用 margin 负值将其居中，前提是需要 提前知道尺寸
优点：兼容性不错
缺点：需要提前知道尺寸
.parent2 {
position: relative;
background: rosybrown;
height: 100px;
}
.child2 {
background: blue;
position: absolute;
width: 80px;
height: 40px;
left: 50%;
top: 50%;
margin-top: -20px;
margin-left: -40px;
}
如何在不知道尺寸的情况下垂直居中呢，CSS3——translate 属性的出现为我们提供了可能。该方法利用 translate 以自身的宽高为基准来达到居中效果，相当于 margin 负值的作用，不过我们不需要知道尺寸，translate 帮我们解决了。transform 中 translate 偏移的百分比值是相对于自身大小的，
优点: 不需要提前知道尺寸
缺点: 兼容性不好 (在移动端上基本支持)
/* 块级元素：绝对定位 + transform 优点: 不需要提前知道尺寸
缺点: 兼容性不好 */
.parent3 {
position: relative;
background: antiquewhite;
height: 200px;
}
.child3 {
background: salmon;
position: absolute;
width: 80px;
height: 40px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
块级元素：绝对定位 + margin: auto; 结合以上两种，在介绍一个利用绝对定位的一个很好用的方法这是从张鑫旭老师的博客搬运过来的详情戳这里。
优点：不需要根据宽高去做相应的位移，自动帮你居中好了，兼容性好
/* 块级元素：绝对定位 + margin: auto; 优点：不需要根据宽高去做相应的位移，兼容性好 */
.parent4 {
position: relative;
background: wheat;
height: 200px;
}
.child4 {
width: 80px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
background: blue;
}
利用 display: table-cell 实现垂直居中 display 的 table 和 table-cell 一般情况下用的不多，所以很少有人去关注它。这个实现的原理就是把其变成表格样式，再利用表格的样式来进行居中，在某些情况下还是很方便的。
/* 块级元素：display: table-cell */
.parent5 {
width: 600px;
height: 200px;
border: 1px solid red;
display: table;
}
.child5 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 水平垂直居中 */
.parent7 {
width: 400px;
height: 300px;
display: table-cell;
vertical-align: middle;
border: 1px solid red;
}
.child7 {
display: inline-block;
vertical-align: middle;
background: blue;
}
利用 calc() 计算属性缺点: 兼容性差，需要计算，消耗性能，需要提前知道尺寸
.parent8 {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
}
.child8 {
top:-webkit-calc(50%-50px);
top:-moz-calc(50%-50px);
top:calc(50%-50px);
left:-webkit-calc(50%-50px);
left:-moz-calc(50%-50px);
left:calc(50%-50px);
width: 100px;
height: 100px;
background: blue;
}
利用伪元素实现居中 (这个原理我还没搞懂，但是实践过真的 ok)
.parent9 {
width: 300px;
height: 300px;
border: 1px solid red;
text-align: center;
}
.child9 {
background: blue;
width: 100px;
height: 40px;
display: inline-block;
vertical-align: middle;
}
.parent9::before {
content: ”;
height: 100%;
display: inline-block;
vertical-align: middle;
}
块级元素：display: flex 缺点：在 pc 上兼容性不好
.parent10 {
width: 600px;
height: 200px;
border: 1px solid red;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.child10 {
background: blue;
}
总结
以上是分别总结了水平居中和垂直居中常用的方法，要想实现水平垂直居中可以自己组合搭配一下。方法目前总结了这几种，之后有新的方法也会持续更新，未完待续连载中 ….
