这是一个创建于 2484 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在找工作，面试前端时总有个问题就是 CSS 如何实现居中效果。在经过多次打击之后，终于静下心来把相关内容过了一遍，最终有了这个项目，灵感来源于 CSS-Tricks 和 JavaScript Array Explorer。
预览： http://www.chunqiuyiyu.com/css-centering-explorer/
GitHub: https://github.com/chunqiuyiyu/css-centering-explorer
欢迎大家使用并提出建议！
预览： http://www.chunqiuyiyu.com/css-centering-explorer/
GitHub: https://github.com/chunqiuyiyu/css-centering-explorer
欢迎大家使用并提出建议！
13 条回复 • 2018-03-06 11:12:55 +08:00
 |
1
Smilecc 2018-03-01 14:40:28 +08:00  1
挺有意思的
|
 |
2
chunqiuyiyu OP @Smilecc 也是对自己 CSS 知识方面的一个梳理，自己在这方面比较薄弱。
|
 |
3
learnshare 2018-03-01 16:05:04 +08:00 1
知道其中一小部分即可，很多场景比较难见到。见到了可能是结构和布局需要优化
|
|
4
chunqiuyiyu OP @learnshare 是这样的。
|
 |
5
flowersing 2018-03-01 17:26:03 +08:00 1
一左一右地布局会不会好一点，现在这样会跳动感觉没有那么直观
|
 |
6
woodensail 2018-03-01 17:29:01 +08:00 2
|
|
7
chunqiuyiyu OP @flowersing 原来的 JavaScript Array Explorer 就是左右布局的，但是自己喜欢简洁一些，所以就直接做成了单栏的。
|
|
8
chunqiuyiyu OP @woodensail 很好的网站，我这个不过是个玩具罢了。
|
 |
9
MinonHeart 2018-03-01 18:25:43 +08:00 1
padding: 30px auto;
No, 这种不是居中方式 |
|
10
chunqiuyiyu OP @MinonHeart 一种障眼法，确实不是真正的居中。
|
 |
11
jackqian 2018-03-04 09:24:29 +08:00 via iPhone
@chunqiuyiyu 我都是用这个居中的啊，(刚学的小白...)
|
 |
12
blueset 2018-03-06 04:51:03 +08:00 1
|
|
13
chunqiuyiyu OP @blueset 我的疏忽，这个项目是依据 CSS Tricks 上的一篇旧的文章完成的。没想到现在 display: grid 的支持已经比较广泛了，我修改一下。
|
Select Language