Ik probeer een video op mijn site te centreren, maar ik wil de centreertags niet in HTML gebruiken, omdat deze nogal verouderd is. Hoe doe ik dit met CSS? Hier is mijn HTML-code als het enige hulp is.

<center>
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</center> 

Antwoord 1, autoriteit 100%

Hier is een voorbeeld: http://jsfiddle.net/Cn7SU/

Voeg deze CSS-regels toe aan het element video:

display: block;
margin: 0 auto;

Het toevoegen van de eigenschap display: blockis erg belangrijk. Anders kun je het element niet centreren.

Antwoord 2, autoriteit 50%

Hier zijn drie manieren om je video te centreren:

1. Marge gebruiken

video {
  display: block;
  margin: auto;
}

2. Transformeren gebruiken

video {
  margin-left: 50vw;
  transform: translate(-50%);
}

3. Een container gebruiken & flexbox

.container video {
  display: flex;
  justify-content: center;
}

Antwoord 3, autoriteit 30%

Als u video horizontaal wilt centreren, voegt u toe:

display: block;
margin: 0 auto;

Antwoord 4, autoriteit 20%

Ik weet dat dit onderwerp zo lang was, maar hier gaat u:

Dit is voor het midden van de pagina

video {
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
}

En dit is voor het midden van de lijn

video {
  display: block;
  margin: auto;
}

Alleen voor wie dit zoekt

Antwoord 5, autoriteit 5%

Probeer dit, plaats een wrapper-div rond uw videotag. html5-video’s en afbeeldingen worden bij het stylen als tekst behandeld. Dus een text-align:center zal werken. Je kunt de viool hieronder bekijken.

<div class="video">  
  <video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>