CSS实现垂直剧中

发表于 | 分类于

CSS实现垂直剧中

1、相对定位+绝对定位+CSS3 transform: translate(-50%, -50%); 

1
2
3
4
5
6
7
8
9
10
11
12
#container{
  position:relative;
}

#center{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

2、相对定位+绝对定位+居中容器长宽减半 

1
2
3
4
5
6
7
8
9
10
11
12
#container{
  position:relative;
}

#center{
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin:-50px 0 0 -50px;
}

3、相对定位+绝对定位+margin 

1
2
3
4
5
6
7
8
9
10
11
#container{
  position:relative;
}
#center{
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

3、flex布局 

1
2
3
4
5
#container{
  display:flex;
  justify-content:center;
  align-items: center;
}

4、table布局 

1
2
3
4
5
6
#container{
  display: table;
}
#center{
  display: table-cell;
}