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

Posted 2023-03-05

【中文标题】中心/中间对齐元素大于容器[重复]

【英文标题】：Center/middle align element larger than container [duplicate]

【发布时间】：2017-12-09 03:15:33

【问题描述】：

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

我有一个 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 可以吗？

【问题讨论】：

注意，在纯 CSS 中使用双斜杠 cmets // 可能会完全违反规则，因此请使用 /* */

答案在重复的问题中。 ***.com/questions/11670874/…

【参考方案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>

【讨论】：

注意，在纯 CSS 中使用双斜杠 cmets // 可能会完全违反规则，因此请使用 /* */

所以在您的解决方案中，我希望将高度拉伸并将视频元素居中，以便在它的左侧和右侧出现溢出（不管溢出隐藏）