css transform translate 在y轴上不起作用

【问题标题】：css transform translate doesn't work on y axiscss transform translate 在y轴上不起作用
【发布时间】：2021-02-08 20:59:50
【问题描述】：

我想在 x 轴和 y 轴上集中一个 div 块。但是我不能使用translate移动方块。

.maincontain {
  position: relative;
  min-height: 100%;
  width: 100%;
  float: left;
}

.bannerimage {
  position: absolute;
  width: 64%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: 100% 100%;
  border-radius: 5px;
  background-color: violet;
}

<div class="maincontain">
  <div class="bannerimage" id="image_gallery">
    <img src="./img/2.jpg" alt="2">
    <img src="./img/3.jpg" alt="3">
    <img src="./img/4.jpg" alt="4">
  </div>
</div>

【问题讨论】：

.maincontain { min-height: 100%;} 需要一个高度设置为有效的父级(% 需要从父级计算一个值;))，你有没有代码？

标签： html css transform translate

【解决方案1】：

您可以考虑使用flex 或grid 来避免使用position，min-height 也可以使用vh 单位（视口高度）而不是需要从父级继承高度值的 %计算一下。

例子：

body {
  margin: 0;
}

.maincontain {
  display: grid;
  min-height: 100vh;
}

.bannerimage {
  margin: auto;
  width: 64%;
  border-radius: 5px;
  background-color: violet;
}

<div class="maincontain">
  <div class="bannerimage" id="image_gallery">
    <img src="./img/2.jpg" alt="2">
    <img src="./img/3.jpg" alt="3">
    <img src="./img/4.jpg" alt="4">
  </div>
</div>

body {
  margin: 0;
}

.maincontain {
  display: flex;
  min-height: 100vh;
}

.bannerimage {
  margin: auto;
  width: 64%;
  border-radius: 5px;
  background-color: violet;
}

<div class="maincontain">
  <div class="bannerimage" id="image_gallery">
    <img src="./img/2.jpg" alt="2">
    <img src="./img/3.jpg" alt="3">
    <img src="./img/4.jpg" alt="4">
  </div>
</div>

【讨论】：