有关 CSS 居中的一个项目

[chunqiuyiyu]

最近在找工作，面试前端时总有个问题就是 CSS 如何实现居中效果。在经过多次打击之后，终于静下心来把相关内容过了一遍，最终有了这个项目，灵感来源于 CSS-Tricks 和 JavaScript Array Explorer。

预览： http://www.chunqiuyiyu.com/css-centering-explorer/

GitHub: https://github.com/chunqiuyiyu/css-centering-explorer

欢迎大家使用并提出建议！

[Smilecc]

挺有意思的

[chunqiuyiyu]

@Smilecc 也是对自己 CSS 知识方面的一个梳理，自己在这方面比较薄弱。

[learnshare]

知道其中一小部分即可，很多场景比较难见到。见到了可能是结构和布局需要优化

[chunqiuyiyu]

@learnshare 是这样的。

[flowersing]

一左一右地布局会不会好一点，现在这样会跳动感觉没有那么直观

[woodensail]

建议参考 http://howtocenterincss.com

[chunqiuyiyu]

@flowersing 原来的 JavaScript Array Explorer 就是左右布局的，但是自己喜欢简洁一些，所以就直接做成了单栏的。

[chunqiuyiyu]

@woodensail 很好的网站，我这个不过是个玩具罢了。

[MinonHeart]

padding: 30px auto;
No, 这种不是居中方式

[chunqiuyiyu]

@MinonHeart 一种障眼法，确实不是真正的居中。

[jackqian]

@chunqiuyiyu 我都是用这个居中的啊，(刚学的小白...)

[blueset]

"Most browsers don't support `display: grid`"?



https://caniuse.com/#feat=css-grid

[chunqiuyiyu]

@blueset 我的疏忽，这个项目是依据 CSS Tricks 上的一篇旧的文章完成的。没想到现在 display: grid 的支持已经比较广泛了，我修改一下。