CSS让一个div相对于body水平垂直居中
实现如下
- 使用transform属性
body {
background: black;
margin: 0;
position: relative;
}
div[id^="vjs_video_"]{
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
- 另一种方法
body {
margin: 0;
display: inline-block;
}
div {
postion: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
tips
div[id^="vjs_video_"]这种写法表示,id以 "vjs_video_"这样开头的div则使用该样式