【CSS三种居中方案全解】CSS水平居中常用方法集结

目录

• 前言
• CSS水平居中
• 参考资料

CSS 居中系列文章

CSS 垂直居中

CSS 水平垂直居中

一、前言

难得搜索整理一番 CSS 垂直居中，水平居中，水平垂直居中的近乎所有的方案。既能回顾知识查漏补缺，又能提升知识增长见识。CSS 本身就没有道理，以下内容全是个人搜集整理，参考资料放在最后。居中的方案只是为了实现居中，不代表每个方案都是最好的解决办法，因为有些方案还是很离谱的，一般用不上。希望能帮助到你们。

话不多 BB，直接上才艺（代码演示）

tips:内容挺多的，顺着标题找吧

二、CSS 水平居中

近乎所有的垂直居中方案都可以连带设置水平居中。

1、行内元素水平居中text-align:center，一个块级的容器包裹一个行内元素，行内元素水平居中，不需要知道该元素的宽高

/* HTML */

  

• 效果展示

2、margin-left:auto,margin-right:auto。，块级元素水平居中，加上 text-align：center 让里面的文字水平居中。不需要知道元素的宽高，与父元素无关，只是显示出现水平居中了。

/* HTML */

  

• 效果展示

3、父元素display:table-cell;text-align:center，里面的子元素就会实现水平居中，不需要知道子元素的宽高

/* HTML */

  

• 效果展示

4、absolute+margin:auto，定位为 absolute 的元素水平居中，不需要知道该元素的宽高

/* HTML */

  

• 效果展示

5、absolute+负margin，定位为 absolute 的元素水平居中，需要知道该元素的宽高

• 效果展示

6、absolute+calc(css3计算属性)，定位为 absolute 的元素水平居中，需要知道该元素的宽高

• 效果展示

7、absolute+transform，定位为 absolute 的元素水平居中，不需要知道元素的宽高

• 效果展示

8、flex，目前主流的布局方案，父元素为 flex 容器且添加 justify-content: center;，控制子元素的布局。不需要知道子元素的宽高

• 效果展示

9、grid ，目前最强大的布局方案，使用还尚未流行。父元素为 grid，子元素添加 justify-self: center;。不需要知道子元素的宽高

• 效果展示

10、隐藏节点(盒子)实现 该原理就是使用盒子占位置，但不显示出该盒子。另外的盒子水平居中，子盒子的宽高需由实际计算时确定

• 效果展示

三、参考资料

张鑫旭 CSS 大佬

百度经验