Center/Mitte align Element größer als Container

Question

EDIT: Der Versuch, die Frage neu zu formulieren, so dass das Problem richtig

versteht Ich habe ein div-Element, in dem ein Videoelement ist. Das div-Element ist in der Größe veränderbar. Das Videoelement muss ebenfalls in der Größe angepasst werden können, aber es muss auch sein ursprüngliches Seitenverhältnis beibehalten.

.container { 
 
    background: #ff9; 
 
    height: 150px; 
 
    width: 100px; 
 
} 
 

 
.subcontainer { 
 
    background: #9ff; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    margin: 5px; 
 
} 
 

 
.fixedsize{ 
 
    background: #9f9; 
 
}

<div class="container"> 
 
    <div class="subcontainer"> 
 
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video> 
 
    </div> 
 
</div>

Also ich brauche, hier das Video-Element sowohl horizontal als auch vertikal zentriert werden, ohne dass das Seitenverhältnis, es zu verlieren.

.container { 
 
    background: #ff9; 
 
    height: 400px; 
 
    width: 1000px; 
 
} 
 

 
.subcontainer { 
 
    background: #9ff; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    margin: 5px; 
 
} 
 

 
.fixedsize { 
 
    background: #9f9; 
 
}

<div class="container"> 
 
    <div class="subcontainer"> 
 
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video> 
 
    </div> 
 
</div>

In diesem Fall möchte ich das Video vertikal strecken und dann horizontal zentriert.

Ähnlicher Fall für wo die Breite des Containers größer als die Videobreite ist; Ich möchte, dass sich das Video horizontal und vertikal zentriert.

Ist dies nur mit CSS möglich?

Answer 1

max-width und max-height beide auf 100% gesetzt wird das Element zwingen, kleiner als seine Eltern zu bleiben. Die Ausrichtung ist die gleiche wie normalerweise, um ein Blockelement zu zentrieren.

.container { 
 
    background: #ff9; 
 
    height: 150px; 
 
    width: 100px; 
 
    //overflow: hidden; 
 
} 
 

 
.subcontainer { 
 
    background: #9ff; 
 
    min-width: 100%; 
 
    min-height: 100%; 
 
    margin: 5px; 
 
    //overflow: hidden; 
 
    position: relative; 
 
} 
 

 
.fixedsize{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    background: #9f9; 
 
}

<div class="container"> 
 
    <div class="subcontainer"> 
 
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video> 
 
    </div> 
 
</div>