├── common.css ├── grid.html ├── flex.html ├── .github └── FUNDING.yml ├── css-table.html ├── absolute3.html ├── absolute4.html ├── absolute1.html ├── absolute2.html ├── table.html ├── lineheight.html ├── writing-mode.html └── README.md /common.css: -------------------------------------------------------------------------------- 1 | .wp { 2 | border: 1px solid red; 3 | width: 300px; 4 | height: 300px; 5 | } 6 | 7 | .box { 8 | background: green; 9 | } 10 | 11 | .box.size{ 12 | width: 100px; 13 | height: 100px; 14 | } 15 | 16 | .question { 17 | margin-top: 50px; 18 | } 19 | -------------------------------------------------------------------------------- /grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | grid 6 | 7 | 16 | 17 | 18 |
19 |
123123
20 |
21 | 22 |
23 | 交流反馈 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | flex 6 | 7 | 16 | 17 | 18 |
19 |
123123
20 |
21 | 22 |
23 | 交流反馈 24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: ['https://yanhaijing.com/mywallet/']# Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /css-table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | css-table 6 | 7 | 17 | 18 | 19 |
20 |
123123
21 |
22 | 23 |
24 | 交流反馈 25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /absolute3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | absolute + calc 6 | 7 | 17 | 18 | 19 |
20 |
123123
21 |
22 | 23 |
24 | 交流反馈 25 |
26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /absolute4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | absolute + transform 6 | 7 | 18 | 19 | 20 |
21 |
123123
22 |
23 | 24 |
25 | 交流反馈 26 |
27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /absolute1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | absolute + 负margin 6 | 7 | 19 | 20 | 21 |
22 |
123123
23 |
24 | 25 |
26 | 交流反馈 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /absolute2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | absolute + margin auto 6 | 7 | 20 | 21 | 22 |
23 |
123123
24 |
25 | 26 |
27 | 交流反馈 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | table 6 | 7 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 |
21 |
123123
22 |
26 | 27 |
28 | 交流反馈 29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /lineheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | lineheight 6 | 7 | 20 | 21 | 22 |
23 |
文本文本文本
24 |
25 | 26 |
27 | 交流反馈 28 |
29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /writing-mode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | writing-mode 6 | 7 | 24 | 25 | 26 |
27 |
28 |
123123
29 |
30 |
31 | 32 |
33 | 交流反馈 34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 水平垂直居中 2 | 3 | ## 仅居中元素定宽高适用： 4 | - [absolute + 负margin](http://yanhaijing.com/vertical-center/absolute1.html) 5 | - [absolute + margin auto](http://yanhaijing.com/vertical-center/absolute2.html) 6 | - [absolute + calc](http://yanhaijing.com/vertical-center/absolute3.html) 7 | 8 | ## 居中元素不定宽高适用： 9 | - [absolute + transform](http://yanhaijing.com/vertical-center/absolute4.html) 10 | - [writing-mode](http://yanhaijing.com/vertical-center/writing-mode.html) 11 | - [lineheight](http://yanhaijing.com/vertical-center/lineheight.html) 12 | - [table](http://yanhaijing.com/vertical-center/table.html) 13 | - [css-table](http://yanhaijing.com/vertical-center/css-table.html) 14 | - [flex](http://yanhaijing.com/vertical-center/flex.html) 15 | - [grid](http://yanhaijing.com/vertical-center/grid.html) 16 | 17 | ## 总结 18 | 19 | 下面对比下各个方式的优缺点，肯定又双叒叕该有同学说回字的写法了，简单总结下 20 | 21 | - PC端有兼容性要求，宽高固定，推荐absolute + 负margin 22 | - PC端有兼容要求，宽高不固定，推荐css-table 23 | - PC端无兼容性要求，推荐flex 24 | - 移动端推荐使用flex 25 | 26 | **小贴士：**关于flex的兼容性决方案，请看这里《[移动端flex布局实战](//yanhaijing.com/css/2016/08/21/flex-practice-on-mobile/)》 27 | 28 | | 方法 | 居中元素定宽高固定 | PC兼容性 | 移动端兼容性 | 29 | | ---------------------- | --------- | ---------------------------- | --------------- | 30 | | absolute + 负margin | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 31 | | absolute + margin auto | 是 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 32 | | absolute + calc | 是 | ie9+, chrome19+, firefox4+ | 安卓4.4+, iOS6+ | 33 | | absolute + transform | 否 | ie9+, chrome4+, firefox3.5+ | 安卓3+, iOS6+ | 34 | | writing-mode | 否 | ie6+, chrome4+, firefox3.5+ | 安卓2.3+, iOS5.1+ | 35 | | lineheight | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 36 | | table | 否 | ie6+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 37 | | css-table | 否 | ie8+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 38 | | flex | 否 | ie10+, chrome4+, firefox2+ | 安卓2.3+, iOS6+ | 39 | | grid | 否 | ie10+, chrome57+, firefox52+ | 安卓6+, iOS10.3+ | 40 | 41 | 42 | ## 相关博文 43 | http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/ 44 | --------------------------------------------------------------------------------