CSS实现垂直居中的N种方法
1. 父元素高度可变，Padding大法demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.ct{
padding: 40px 0;
text-align: center;
background: #eee;
}
</style>
</head>
<body>
<div class="ct">
<p>这里是饥人谷</p>
<p>这里是饥人谷</p>
</div>
</body>
</html>
|
2.保持页面屏幕居中demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
html,body {
height: 100%;
}
.dialog {
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px; <! - -这两句也可以换成transform替换 - - >
margin-top: -150px; <! - - transform:translate(-50%,-50%); - - >
width: 400px;
height: 300px;
box-shadow: 0px 0px 3px #000;
}
.dialog .header{
padding: 10px;
background: #000;
color: #fff;
}
.dialog .content{
padding: 10px;
}
</style>
</head>
<body>
<div class="dialog">
<div class="header">我是标题</div>
<div class="content">我是内容</div>
</div>
</body>
</html>
|
3. vertical-align：middle
只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用
3.1:display: inline-block;demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
text-align: center;
}
.box:after{ /* 原理：content加入一个空白符， */
content: '1'; /* 形成行内块级元素，并设高度为父元素高度。然后用 */
display: inline-block; /* vertical-align：middle实现垂直居中 */
background:pink; /* img再利用垂直居中与之对齐 */
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}
</style>
<body>
<div class="box">
<img src="http://upload-images.jianshu.io/upload_images/8353883-51a7b16e5add595f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
</div>
</body>
</html>
|
3.2. display: table-cell;demo
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<body>
<div class="box">
<img src="http://upload-images.jianshu.io/upload_images/8353883-51a7b16e5add595f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" >
</div>
</body>
</html>
|
4.100% 高度的 after before 加上 inline block
- 父元素after和before均设一个inline-block，content为空。
100% 高度的 afrer before 加上 inline block
5.absolute margin auto
- 父元素 position: relative;
- 子元素 position: absolute;
- 子元素 margin：auto
- 上下左右居设为0；
absolute margin auto
6. flex
父元素
1
2
3
| display: flex;
justify-content: center;
align-items: center;
|
flex居中
总结
如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
忠告：能不写 height 就千万别写 height。
table自带功能
100% 高度的 afrer before 加上 inline block
优化
div 装成 table
margin-top -50%
translate -50%
absolute margin auto
flex
还有其他方法，自己搜吧。
