中心/中间对齐元素大于容器[重复]

Question

编辑：尝试改写问题以便正确理解问题

我有一个 div 元素，其中有一个视频元素。 div 元素可调整大小。视频元素也需要调整大小，但也需要保持其原始纵横比。

.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>

所以我需要，这里的视频元素水平和垂直居中而不丢失它的纵横比。

.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>

在这种情况下，我希望视频先垂直拉伸，然后水平居中。

容器宽度大于视频宽度的类似情况；我希望视频水平拉伸并垂直居中。

仅使用 css 可以吗？

Answer 1

max-width 和 max-height 都设置为 100% 将强制元素保持小于其父元素。对齐方式与通常将块元素居中的方式相同。

.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>