CSS居中的方法有特别多，这里只介绍最基本的方法。

CSS中分块级元素和内联元素，但是块级元素或者内联元素都可以设置display，最常用的三种display——inline、block、inline-block。

本博客介绍了下面各种情况如何居中：

1、单独设置block元素如何居中；

2、单独设置inline元素如何居中；

3、单独设置inline-block元素如何居中；

4、父元素和子元素组合如何居中；

---

1、单独设置inline如何居中；

首先了解一些单独的inline元素带文字的特性：

• 不能设置水平方向的width、垂直方向的weight、垂直方向的margin-top/bottom、水平方向的text-align。
• 垂直方向的padding-top/bottom设置后会出现奇怪的效果，调整后反而会影响居中的效果，所以也不能调整来设置居中。
• 垂直方向的line-height可以调整，因为line-height一般需要配合height来调整，inline元素无法调整height，默认情况下行高已经垂直方向居中了，所以也不需要调整。
• 水平方向的padding-left/right可以调整，但是会影响边框内的背景颜色，可以用来调整边框内水平居中。
• 水平方向的margin-left/right 可以调整，不会影响边框内的背景颜色，可以用来调整边框外水平居中。

以上5点前面的博客测试过：

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

bomber：块级元素和内联元素部分属性效果展示

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

在此基础上，部分方法会用使用一个新元素测试：

CSS3 transform 属性​www.w3school.com.cntransform​developer.mozilla.org

默认单独的inline带文字的元素显示效果是文字和边框都是靠左上角。

（1-1）可以通过测出文字的宽度来计算margin水平方向的数值设置，从而得到边框外水平居中。

如果是在一行内文字的变化可以自适应，超过一行就不可以自适应。

（1-2）增加使用transform:translateX(250px);测试，发现并没有什么反应，说明transform对inline元素无效。

（2-1）inline元素文字默认边框内居中设置，如果想重新定位一个居中位置，padding水平方向可以设置边框内左右两边相等即可。

如果是在一行内文字的变化可以自适应，超过一行就不可以自适应。

---

2、单独设置block如何居中；

首先了解一些单独的block元素带文字的特性：

• 水平方向的width、垂直方向的weight、垂直方向的margin-top/bottom、水平方向的margin-left/right、垂直方向的padding-top/bottom、水平方向的padding-left/right、垂直方向的line-height、水平方向的text-align都可以用来设置居中。

以上1点前面的博客测试过：

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

在此基础上，部分方法会用使用一个新元素测试：

CSS3 transform 属性​www.w3school.com.cntransform​developer.mozilla.org

默认单独的block带文字的元素显示效果是文字靠左边布置，元素占用一行，所以在没有设置width的时候边框外已经是水平居中状态。

（1-1）设置width之后需要增加margin-left：auto；和margin-right：auto；可以设置边框外水平居中。

文字变化水平方向一行或者超过一行都能够自适应：

（1-2）不设置width，通过设置水平方向的两边margin-right/left相等也可是使边框外水平居中。

文字变化水平方向一行或者超过一行都能够自适应：

（1-3）设置width之后，通过计算水平方向来设置 transform:translateX也可以设置边框外水平居中。

因为block元素文字默认占用一行，所以文字变化水平方向一行或者超过一行都能够自适应：

（2-1）设置text-align:center;可以设置边框内水平居中。

文字变化水平方向一行或者超过一行都能够自适应：

（2-2）设置padding水平方向可以设置边框内水平居中。因为文字是自动靠左边对齐，那么只要计算出padding-left和右边一样的距离即可。

padding-right右边一般不设置，设置后会越来越宽，除了设置的比padding-left要小很多。

文字变化水平方向一行或者超过一行都不能够自适应：

（3-1）可以通过计算调整margin-top来实现边框外垂直方向的居中，下面的元素仍然按照文档流的方向自适应。

文字增加导致增加行数的时候，垂直方向的距离需要重新调整，不能够自适应。

（3-2）通过调整transform实现边框外垂直方向的居中，下面的元素不按照文档流的方向自适应。

如果下面的元素与用transform调整后的元素干涉，会覆盖掉下面的元素：

文字增加导致增加行数的时候，垂直方向的距离需要重新调整，不能够自适应。增加的文字行数会导致下面的元素按照行数文档流方向流动。说明transform改变了位置，但是行数方向文档流按照原位置流动。

（4-1）如果设置了height，就相当于改变了默认的height与line-height的比例，这样就会导致边框内文字垂直方向不能居中。

需要设置line-height与height保持一致才可以满足边框内文字垂直方向居中。

文字变化导致增加行数后，垂直方向不能够自适应。

（4-2）设置padding垂直方向可以设置边框内垂直居中。因为文字是自动靠上边对齐，那么只要计算出padding-top和底边一样的距离即可。

文字变化导致增加行数后，垂直方向不能够自适应。

（4-3）需要通过调整使（行数×"line-height"）=height就可以设置居中；

或者通过调整使（行数×"line-height"）<height，

并通过调整padding-top使（行数×"line-height"+"padding-top"）=height达到边框内垂直居中。

---

3、单独设置inline-block如何居中；

首先了解一些单独的inline-block元素带文字的特性：

• 水平方向的width、垂直方向的weight、垂直方向的margin-top/bottom、水平方向的margin-left/right、垂直方向的padding-top/bottom、水平方向的padding-left/right、垂直方向的line-height都可以用来设置居中。
• 当设置了width后，水平方向的text-align可以用来设置居中。

以上2点前面的博客测试过：

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

在此基础上，部分方法会用使用一个新元素测试：

CSS3 transform 属性​www.w3school.com.cntransform​developer.mozilla.org

默认单独的inline-block带文字的元素显示效果是文字靠左边布置，随文字按照文档流方向移动占用。

（1-1）设置width之后，增加margin-left；auto；和margin-right：auto；并不能像block元素一样边框外水平居中，所以这种方式不可以设置边框外水平居中。

（1-2）不设置width，通过设置水平方向的两边margin-right/left相等可以使边框外水平居中，效果跟inline元素一样。

文字变化效果与inline不同，文字变化水平方向一行或者超过一行都能够自适应：

（1-3）通过计算水平方向来设置 transform:translateX也可以设置边框外水平居中。

但是通过调整transform实现边框外水平方向的居中，右边的元素不按照文档流的方向自适

应。并且右边的元素与用transform调整后的元素干涉，会覆盖掉右边的元素：

宽度width增加会导致水平方向的距离需要重新调整，不能够自适应。增加的width会导致右边的元素一行的时候按照inline元素文档流方向流动，占领一行后按照block元素文档流方向流动。说明transform改变了位置，但是文档流按照原位置流动。

不设置宽度，单独通过文字增加会导致水平方向的距离需要重新调整，不能够自适应。增加的文字会导致右边的元素一行的时候按照inline元素流动，占领一行后按照block元素文档流方向流动。说明transform改变了位置，但是文档流按照原位置流动。

（2-1）使用text-align:来设置边框内水平居中。

增加宽度width后默认显示

使用text-align:center可以设置边框内水平居中，针对inline-block元素设置text-align:center的前提必须width。

文字变化水平方向一行或者超过一行都能够自适应，如果文字增加为未超过一行，右边的元素保持不动，超过一行，右边的元素会换行显示。

（2-2）在一行内设置padding水平方向可以设置边框内水平居中。

inline-block元素默认不超过一行的时候显示效果跟inline一样，也就是默认边框内居中。如果想重新定位一个居中位置，padding水平方向可以设置边框内左右两边相等即可。

如果是在一行内文字的变化可以自适应，这与inline元素效果一样。超过一行就不可以自适应。文字按照靠左对齐，并且超过一行后会导致右边的元素产生block元素的文档流效果，换行流动。

（3-1）可以通过计算调整margin-top来实现边框外垂直方向的居中，右边的元素仍然按照inline元素文档流的方向自适应。

如果是不超过一行内文字的变化可以自适应。文字变化不超一行，右边的元素流动按照inline文档流方向流动。

文字变化超过一行不可以自适应，并且会导致右边的元素产生block元素的文档流效果，换行流动。

（3-2）通过调整transform实现边框外垂直方向的居中，右边的元素不按照文档流的方向自适应。

如果下面的元素与用transform调整后的元素干涉，会覆盖掉下面的元素：

如果是不超过一行内文字的变化可以自适应。文字变化不超一行，右边的元素流动按照inline文档流方向流动。

文字变化超过一行不可以自适应，并且会导致右边的元素产生block元素的文档流效果，换行流动。

说明transform改变了位置，但是不超过一行的时候文档流按照inline元素的原位置流动，超过一行的时候文档流按照block元素的原位置换行流动。

（4-1）如果设置了height，就相当于改变了默认的height与line-height的比例，这样就会导致边框内文字垂直方向不能居中。

需要设置line-height与height保持一致才可以满足边框内文字垂直方向居中。

如果是不超过一行内文字的变化可以自适应。文字变化不超一行，右边的元素流动按照inline文档流方向流动。

文字变化超过一行不可以自适应，并且会导致右边的元素产生block元素的文档流效果，换行流动。

（4-2）设置padding垂直方向可以设置边框内垂直居中。因为文字是自动靠上边对齐，那么只要计算出padding-top和底边一样的距离即可。

如果是不超过一行内文字的变化可以自适应。文字变化不超一行，右边的元素流动按照inline文档流方向流动。

文字变化超过一行不可以自适应，并且会导致右边的元素产生block元素的文档流效果，换行流动，这种换行流动需要满足增加的文字填补了设定的height后才会换行。

（4-3）需要通过调整使（行数×"line-height"）=height就可以设置居中；

或者通过调整使（行数×"line-height"）<height，

并通过调整padding-top使（行数×"line-height"+"padding-top"）=height达到边框内垂直居中。

---

以上单独的元素中也可以增加position：relative；这样也可以通过top/bottom/left/right来调整居中位置，效果跟下面的组合元素使用position：absolute一样。区别见下面链接：

bomber：position（absolute、relative、static）​zhuanlan.zhihu.com

---

4、父元素和子元素组合如何居中；

组合的情况我们也可以使用前面说的各个元素单独的设置来居中，但是需要很多计算。

一般大部分推荐使用的是绝对定位配合相对定位来设置居中。

如何设置博客有说明过：

bomber：position（absolute、relative、static）​zhuanlan.zhihu.com

（1）父元素是inline的情况：

博客测试过inline元素的特性：

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

很多属性都不能设置，并且他的行高是由自身字体大小和字体设计决定的。width宽和height高都不能设置，border可以设置显示效果，但是不占用行与行之间的空间。设置这样的inline作为父元素，会导致里面的子元素很容易超过父元素的宽高，最终产生奇葩的严重后果。一般情况是不会把inline元素作为父元素的。

所以，虽然能这样使用，但是强烈不推荐使用。

---

（2）父元素是inline-block或者block的情况：

博客测试过这两种元素的特性：

bomber：块级元素和内联元素部分属性效果展示​zhuanlan.zhihu.com

这两种元素特别相似，唯一的区别就是block元素中一行中只有一个字也会占用一行，但是调整width和height，inline-block元素中的文字不超过一行的时候会按照inline元素的文档流流动，但是超过一行后会按照block元素换行流动，同样也可以调整width和height，既然都可以调整宽高，那么其实对于居中效果都是一样的元素。

（2-1）position：absolute；是一种脱离文档的定位，所以如果与其他元素有干涉，默认会覆盖其他元素。博客有介绍过：

bomber：position（absolute、relative、static）​zhuanlan.zhihu.com

这里只使用block来示例边框外的居中：

边框外垂直方向可以通过top/bottom设置一样居中，边框外水平方向可以通过left/right设置一样居中。如果都设置一样就可以垂直水平都居中。

只要文字变化不超过设置的高度就会自适应，如果超过了高度就会导致溢出的效果。

（2-2）通过调整border边框内的属性查看子元素效果。

（2-2-1）通过调整border边框内水平方向的text-align属性查看子元素效果。

（2-2-1-1）子元素是inline/inline-block元素，父元素是block/inline-block元素，子元素与父元素文字都在同一行，通过调整父元素border边框内水平居中text-align：center；可以看到子元素与父元素文字作为一个整体在同一行水平居中。

（2-2-1-2）子元素是inline/inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整父元素border边框内水平居中text-align：center；可以看到子元素与父元素文字分别在所在的行中水平居中。

（2-2-1-3）子元素是block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整子元素border边框内水平居中text-align：center；可以看到子元素border边框内水平居中了，但是子元素外父元素内的文字并没有居中。

（2-2-2）通过调整border边框内水平方向的padding-left/right属性查看子元素效果。

（2-2-2-1）子元素是inline/inline-block元素，父元素是block/inline-block元素，子元素与父元素文字都在同一行，通过调整父元素border边框内水平居中的padding-left:100px;；可以看到子元素与父元素文字作为一个整体在同一行水平移动。

（2-2-2-2）子元素是inline/inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整父元素border边框内水平居中的padding-left:100px;可以看到子元素与父元素文字分别在所在的行中水平移动。

（2-2-2-3）子元素是inline/inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整子元素border边框内水平居中的padding-left:100px；可以看到子元素border边框内水平居中了，但是子元素外父元素内的文字并没有水平移动。

（2-3）通过调整border边框内垂直方向属性查看子元素效果。

（2-3-1）通过调整border边框内垂直方向的line-height组合height，属性查看子元素效果。

（2-3-1-1）子元素是inline/inline-block元素，父元素是block/inline-block元素，子元素与父元素文字都在同一行，通过调整父元素border边框内垂直方向的height：100px；

line-height：100px；可以看到子元素与父元素文字在一行中垂直居中。

（2-3-1-2）子元素是inline/inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整父元素border边框内垂直方向的height：100px；line-height：100px；可以看到子元素与父元素文字作为整体垂直居中。

（2-3-1-3）子元素是inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整子元素border边框内垂直方向的height：100px；line-height：100px；可以看到子元素border边框内垂直居中了，但是子元素外父元素内的文字并没有居中。

（2-4）通过调整border边框内垂直方向属性查看子元素效果。

（2-4-1）通过调整border边框内垂直方向的padding-top/bottom属性查看子元素效果。

（2-4-1-1）子元素是inline/inline-block元素，父元素是block/inline-block元素，子元素与父元素文字都在同一行，通过调整父元素border边框内垂直方向的padding-top：100px；可以看到子元素与父元素文字在一行中垂直移动。

（2-4-1-2）子元素是inline/inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整父元素border边框内垂直方向的padding-top：100px；可以看到子元素与父元素文字作为整体垂直移动。

（2-4-1-3）子元素是inline-block/block元素，父元素是block/inline-block元素，子元素与父元素文字都不在同一行，通过调整子元素border边框内垂直方向的padding-top：100px；可以看到子元素border边框内垂直移动了，但是子元素外父元素内的文字并没有移动。

（2-5）由于子元素都是在父元素的border边框内，所以通过调整父元素border边框外的属性无法使子元素产生效果。

---

总结：

展示效果较多，为了防止自己过段时间忘记了就列表总结各效果。

由于知乎使用表格感觉挺麻烦的，只能用截图总结。

bomber：position（absolute、relative、static）​zhuanlan.zhihu.com

border边框内：

border边框外：

---

2019.4.5 新增，绝对定位垂直水平都居中除了上面说的——边框外垂直方向可以通过top/bottom设置一样居中，边框外水平方向可以通过left/right设置一样居中。如果都设置一样就可以垂直水平都居中。

还可以通过top/bottom、left/right都设置为0px，并且增加一个margin:auto。

本文为本人的原创文章，著作权归本人所有，转载务必注明来源