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.combomber:块级元素和内联元素部分属性效果展示
bomber:块级元素和内联元素部分属性效果展示zhuanlan.zhihu.com在此基础上,部分方法会用使用一个新元素测试:
CSS3 transform 属性www.w3school.com.cn transformdeveloper.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.cn transformdeveloper.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.cn transformdeveloper.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.com4、父元素和子元素组合如何居中;
组合的情况我们也可以使用前面说的各个元素单独的设置来居中,但是需要很多计算。
一般大部分推荐使用的是绝对定位配合相对定位来设置居中。
如何设置博客有说明过:
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边框外的属性无法使子元素产生效果。
总结:
展示效果较多,为了防止自己过段时间忘记了就列表总结各效果。
由于知乎使用表格感觉挺麻烦的,只能用截图总结。
border边框内:
border边框外:
2019.4.5 新增,绝对定位垂直水平都居中除了上面说的——边框外垂直方向可以通过top/bottom设置一样居中,边框外水平方向可以通过left/right设置一样居中。如果都设置一样就可以垂直水平都居中。
还可以通过top/bottom、left/right都设置为0px,并且增加一个margin:auto。
本文为本人的原创文章,著作权归本人所有,转载务必注明来源