CSS3与CSS2 上下左右居中

css3 上下左右居中:

1. transform:translate(左右,上下)上下左右居中:

1
2
3
4
5
6
.video{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

2. flex (左右,上下)上下左右居中:

1
2
3
4
5
.container{
display: flex;
align-items: center;/* 垂直居中 */
justify-content: center;/* center左右居中, space-between两端对齐 */
}

css2 上下左右居中:

3. position:absolute, margin(左右,上下)上下左右居中:

1
2
3
4
5
6
7
8
9
.video{
position:absolute;
top:50%;
left:50%;
with: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
}

4. display: table(左右,上下)上下左右居中:

1
2
3
4
5
6
7
8
9
10
11
.box {
display: table;
table-layout: fixed; //ie
width: 100%;
height: 100%;
text-align:center;
}
.box div {
display: table-cell;
vertical-align: middle;
}