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;
}