html - 我想使图像居中

Question

我正在为启动画面创建加载徽标。动画看起来完全像这样。所以当我尝试这段代码时，我的标志没有按我的意愿定位在中心，而且随着设备长度的增加，标志正在下降，它看起来像这样。应该是这样的。我使用的是ionic4/angular8。

ion-content{
--background:yellow;
}
.tree {
    left: 0;    
    right: 10%;
    margin:0 auto;
    top:50%;
    transform:translateY(-50%);
    position: relative;
}
.tree > div {
 position: absolute;
 height: 100%;
 width: 100%;
 background: yellow;
top: 0;
left: 0;
-webkit-animation-name: hello;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
 animation-name: hello;
animation-duration: 5s;
animation-fill-mode: forwards;
}

.tree img {
    max-width: 100%;
}
@keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}
@-webkit-keyframes hello {
    0% {
        height: 100%;
    }
    100% {
        height: 0%;
    }
}

<ion-content>
<div class="tree">
    <div></div>
    <img src="logo.svg" />
</div>
<ion-content>

标签： htmlcssangularionic-framework

Answer 1

您可以使用边距：0 自动

.tree {
    margin: 0 auto;
}