Table of Contents
竖直居中
flex
标准的竖直居中方式,适用于 IE10+ 和 现代浏览器
1 2 3 4
| .parent { display: flex; align-items: center; }
|
line-height
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .parent { height: 100px; line-height: 100px; }
.child { display: inline; }
.child { display: inline-block; height: 10px; line-height: 10px; }
|
::before ::after
1 2 3 4 5 6 7
| .parent::before { content: ''; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
|
calc
1 2 3 4 5 6
| .child { width: 30px; height: 30px; position: relative; top: calc(50% - 15px); }
|
通用的竖直居中,适用于 IE9+ 和 现代浏览器
1 2 3 4 5
| .child { position: relative; top: 50%; transform: translateY(-50%); }
|
absolute
1 2 3 4 5 6 7 8 9 10 11 12 13
| .parent { position: relative; }
.child { height: 50px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
|
table
模拟 table 的竖直居中
1 2 3 4
| .parent { display: table-cell; vertical-align: middle; }
|
水平集中
块级元素
1 2 3 4
| .child { display: block; margin: 0 auto; }
|
行内元素
1 2 3
| .parent { text-align: center; }
|
flex
1 2 3 4
| .parent { display: flex; justify-content: center; }
|