我想在X轴和Y轴上集中一个div块。但是我不能通过使用translation移动块。
null
.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>null
您可以考虑使用flex或grid来避免使用position，min-height也可以使用vh单位（视口高度）来代替%，这需要从父级继承高度值来计算。
示例:
null
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>