CSS centers a div horizontally and vertically relative to the body

To achieve the following

1. Using the Transform property

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%); }Copy the code

2. Another way to do it

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%); }Copy the code

tips

Div [id^=”vjs_video_”] is written this way. Divs whose ids start with “vjs_video_” use this style